Question

以下是HTML标记的外观

<ul>
  <li>red</li>
  <li>green</li>
  <li>
  <ul>
       <li>banana</li>
       <li>pineapple</li>
       <li>peanut</li>
  </ul>
  </li>
  <li>blue</li>
  <li>
  <ul>
       <li>sun</li>
       <li>mars</li>
       <li>earth</li>
  </ul>
  </li>
  <li>orange</li>
</ul>

如何计算此列表中的直接子女（<li>）？（包含红色，绿色，蓝色，橙色的物品）？

Answer 1

试试这个：

$('ul > li').length;

'ul > li'选择点只有第一级别的孩子，即所有ul的直接孩子。

或

$('ul').children().length;

如果您的代码是字符串变量，如

var html = '<ul><li>.....';

然后

$('ul > li', $(html)).length;

注意：上面的代码将找到所有li

仅查找li使用的第一级：

$('ul:not(li > ul)').children().length;

您也可以使用：

$('ul:not(li > ul) > li').length

对于html变量字符串：

$(html).children('ul > li').length;

Answer 2

使用此：

$("ul > li").length

其他方式：

$("ul").children().length

在JQuery文档中，您还可以找到size()方法来获取元素的数量。但是，最好使用length，因为它更快。

ul选择器可以使用第一个:first元素。另一种方法是设置具体的<ul>元素ID，并使用#element_id选择器对其进行寻址。

DEMO： http://jsfiddle.net/xDYn9/

Answer 3

var ul = document.querySelector('ul');
var count = 0;
for (var ch = ul.firstChild; ch; ch = ch.nextSibling)
  if (ch instanceof HTMLLIElement) count++;

在HTML列表中计算直接子项

3 个答案:

注意：上面的代码将找到所有li