1

这是 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>此列表中的直接子代 ( )？（包含红色、绿色、蓝色、橙色的项目） ?

4

3 回答 3

4

尝试这个：

$('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;
于 2012-05-19T17:42:45.547 回答
2 
var ul = document.querySelector('ul');
var count = 0;
for (var ch = ul.firstChild; ch; ch = ch.nextSibling)
  if (ch instanceof HTMLLIElement) count++;
于 2012-05-19T17:44:11.053 回答
2

用这个：

$("ul > li").length

另一种方式：

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

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

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

演示：http: //jsfiddle.net/xDYn9/

于 2012-05-19T17:43:39.063 回答