Question

我正在尝试将嵌套的html无序列表结构作为数据库，以便组织和分析一些需要的信息。我正在尝试使用jQuery过滤，计数和呈现信息。我正在努力使列表没有任何class或id属性，因此它们非常干净。只有root会有这样的类或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);
});

Answer 2

如果您想选择第二个问题，例如<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());
});

更多信息：

Answer 3

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

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

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

3 个答案: