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

【问题标题】：Jquery - select immediate li text without selecting children ul's textJquery - 选择立即 li 文本而不选择子 ul 的文本
【发布时间】：2012-06-04 01:53:58
【问题描述】：

我正在尝试将嵌套的 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')

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

【问题讨论】：

标签： jquery html html-lists nested-lists

【解决方案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);
});

【讨论】：

我不确定 textContent 是否适用于 pre IE-9 quirksmode.org/dom/w3c_html.html

【解决方案2】：

如果你想选择第二个 li 例如<li> Second second-level element，你可以像这样使用>子选择器和eq：

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

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

要遍历它们，您可以像这样使用each：

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

更多信息：

【讨论】：

它不起作用。此外，选择器中缺少 li。如果我添加 li： $('ul#root > li > ul > li').eq(1).each(function(){ alert($(this).text()); });我仍然得到 li 的孩子 uls 中的所有文本。我想那是因为当你在“每个”循环中得到它时，li 实际上有子 uls。我将尝试将其放入循环中。还有什么想法吗？谢谢。

【解决方案3】：

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

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

【讨论】：