8

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

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

4

3 回答 3

4

如此处所述：

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);
});
于 2010-08-13T03:14:20.700 回答
1

如果你想选择第二个 li eg <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());
});

更多信息：

于 2010-08-12T17:50:03.320 回答
0

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

$('ul#root > li > ul > li > ul').children('li').contents().each(function () {
    if (this.nodeType == 3) alert(this.nodeValue);
});
于 2012-03-29T18:52:02.860 回答