JQuery count 子元素

<div id="selected">
<ul>
<li>29</li>
<li>16</li>
<li>5</li>
<li>8</li>
<li>10</li>
<li>7</li>
</ul>
</div>

我想要计算 <div id="selected"></div>中 <li>元素的总数。使用 jQuery 的 .children([selector])怎么可能做到这一点？

493582 次浏览

小开

var length = $('#selected ul').children('li').length
// or the same:
var length = $('#selected ul > li').length

你可能也可以在子选择器中省略li。

小开

最佳答案

你可以只使用后代选择器来使用.length，就像这样:

var count = $("#selected li").length;

如果你必须使用.children()，那么它是这样的:

var count = $("#selected ul").children().length;

小开

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

或者更好

 $('#selected li').length;

小开

最快的一个:

$("div#selected ul li").length

小开

$("#selected > ul > li").size()

或者:

$("#selected > ul > li").length

小开

你可以使用JavaScript(不需要jQuery)

document.querySelectorAll('#selected li').length;

小开

在纯javascript中使用childElementCount是完全可能的

var countItems = document.getElementsByTagName("ul")[0].childElementCount;
console.log(countItems);

<div id="selected">
<ul>
<li>29</li>
<li>16</li>
<li>5</li>
<li>8</li>
<li>10</li>
<li>7</li>
</ul>
</div>

小开

纯js

selected.children[0].children.length;

let num = selected.children[0].children.length;


console.log(num);

<div id="selected">
<ul>
<li>29</li>
<li>16</li>
<li>5</li>
<li>8</li>
<li>10</li>
<li>7</li>
</ul>
</div>