Jquery - 选择立即 li 文本而不选择子 ul 的文本

Question

我正在尝试将嵌套的 html 无序列表结构作为数据库，用于一些需要组织和分析的信息。我正在尝试使用 jQuery 过滤、计数和呈现信息。我正在努力使列表不具有任何类或 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: Find the text of a list item that contains a nested 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);
});