Jquery - 选择直接 li 文本而不选择子 ul 文本

Question

我试图将嵌套 html 无序列表的结构作为数据库来组织和分析一些需要的信息。我正在尝试使用 jQuery 过滤、计数和呈现信息。我努力使列表不具有任何 class 或 id 属性，以便它们非常干净。只有根才会有这样的类或 id：

<ul id="root">
<li> First first-level element
  <ul>
    <li> First second-level element
      <ul>
        <li>First Third-level element</li>
        <li>Second Third-level element</li>
      </ul>
    </li>
    <li> Second second-level element
      <ul>
        <li>Third Third-level element</li>
        <li>Fourth Third-level element</li>
      </ul>
    </li>
  </ul>
</li>
<li> Second first-level element
  <ul>
    <li> Third second-level element
      <ul>
        <li>Fifth Third-level element</li>
      </ul>
    </li>
  </ul>
</li>
</ul>

我的问题是：如何选择 li 的直接子文本节点而不选择该 li 的子级和孙级 ul（即其子列表）中的文本？例如，给定上面的 html 列表，我希望能够列出第二级中的所有文本节点：

• 第一个第二级元素
• 第二个第二级元素
• 第三个第二级元素

或者来自第三级...等等。这将允许我列出并计算给定级别中的项目。我最接近的是：

// to select items in second but not third level
$('ul#root ul').not('ul#root ul ul').children('li')  

但这不是一个灵活的解决方案。如果列表有很多级别（比如七个）怎么办？要选择第六级，您必须执行以下操作：

// to select items in second but not third level
$('ul#root ul ul ul ul ul').not('ul#root ul ul ul ul ul ul').children('li')  

一定有另一种方法，但我还没有找到。非常感谢任何建议。

Answer 1

如此处所述：

jQuery：查找包含嵌套 ul 的列表项的文本

“普通 DOM 方法允许仅访问一个元素的文本内容”

所以这是一种解决方案：这将一一输出第三级元素：

$('ul#root > li > ul > li > ul').children('li').each(function(){
  alert($(this)[0].firstChild.textContent);
});

这输出第二级元素：

$('ul#root > li > ul').children('li').each(function(){
  alert($(this)[0].firstChild.textContent);
});

这输出第一级元素：

$('ul#root').children('li').each(function(){
  alert($(this)[0].firstChild.textContent);
});

Answer 2

如果您想选择第二个 li，例如

;第二个二级元素，您可以将 > 子选择器与 eq 一起使用，如下所示：

$('ul#root > ul > li').eq(1)

对于第三个，您设置 eq到 2 因为它的索引从 0 开始。

要循环它们，您可以使用 each，如下所示：

$('ul#root > ul > li').eq(1).each(function(){
  alert($(this).text());
});

更多信息：

• 子选择器
• .eq()

Answer 3

更稳健的方法是使用遍历“内容”并选择类型为 (3) 的节点，该节点是 HTML 中文本子元素的节点类型。例如：

$('ul#root > li > ul > li > ul').children('li').contents().each(function () {
    if (this.nodeType == 3) alert(this.nodeValue);
});