jquery - 使用 jQuery 选择列表项而不定位子列表项

Question

我正在尝试使用 jQuery 定位特定的顶级列表项。然而，其中一些列表项还包含它们自己的嵌套列表，我想忽略它们。

我在这里发现了一个 stackoverflow 问题 Target first level <li>s and not the nested <li>s关于这个主题，但在制定解决方案后我仍然遇到同样的问题。

HTML:

<div>
  <ul>
    <li data-level="1">
      Upper List Item
      <ul>
        <li>Sub list item</li>
      </ul>
    </li>
    <li data-level="1">List item 2</li>
  </ul>
</div>

Javascript:

$(document).ready(function() {
    $("div > ul > li[data-level=1]").each(function(index){
    console.log(index + ":" + $(this).text());
  });
});

https://jsfiddle.net/o4mw0gd8/3/

Answer 1

问题是您正在从顶层 <li> 内部获取所有文本。的。

考虑到子级别 <li>位于顶级 <li> 的内部，那么这些文本位于顶层 <li> 内太……

解决方案1:

您应该将文本放入 <span> 中标签，在这些 <span> 中找到文本会更容易。/s 位于顶层 <li>的!

解决方案 2:

在获取 <li> 的文本之前删除所有<ul>其中的元素，因此您只能获得顶层 <li> 的文本的

JS:

$("ul > li[data-level=1]").each(function(index) {
    var current = $(this).clone();
    current.find('ul').remove();
    console.log(index + ":" + current.text().trim() );
});

Working Fiddle