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> 内的 <li>/s 中查找文本会容易得多!

解决方案 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