使用 jQuery 计算直接子 div 元素

我有以下 HTML 节点结构:

<div id="foo">
<div id="bar"></div>
<div id="baz">
<div id="biz"></div>
</div>
<span></span>
</div>

如何计算属于 div型的 foo的直接子级的数目？在上面的例子中，结果应该是两个(bar和 baz)。

301319 次浏览
小开
最佳答案 
$("#foo > div").length

指定 id 为“ foo”的元素的子元素，即 div。然后检索生成的包装集的大小。

小开 
$('#foo > div').size()
小开 
$("#foo > div")

选择所有是 # foo 的直接后代的 div
一旦你有了一组子元素，你可以使用 size 函数:

$("#foo > div").size()

或者你可以用

$("#foo > div").length

两者都会返回相同的结果

小开 
var n_numTabs = $("#superpics div").size();

或者

var n_numTabs = $("#superpics div").length;

如前所述，两者返回相同的结果。
但 size ()函数更像 jQuery“ PC”。
我的页面也有类似的问题。
现在，只要省略 > 就可以了。

小开 
$("#foo > div").length

JQuery 有一个。Size ()函数，它将返回一个元素出现的次数，但是正如 jQuery 文档中指定的那样，它的速度较慢，并且返回与。属性，因此最好只使用。长度属性。 从这里开始: < a href = “ http://www.elecictoolbox.com/get-total-number-match-element-jquery/”rel = “ norefrer”> http://www.electrictoolbox.com/get-total-number-matched-elements-jquery/

小开 
$("div", "#superpics").size();
小开

我建议使用 $('#foo').children().size()以获得更好的性能。

我已经创建了一个 Jsperf测试来看速度差异和 children()方法击败了儿童选择器(# foo > div)方法，至少在 Chrome 中是 百分之六十(金丝雀版本15) ，在 Firefox 中是 百分之二十至三十(版本4)。

顺便说一下，不用说，这两种方法产生相同的结果(在本例中是1000)。

[更新]我已经更新了测试，以包括大小() vs 长度测试，他们没有太大的差异(结果: length使用略快(2%)比 size())

[更新]由于在 OP 中看到的不正确的标记(在我进行‘标记验证’更新之前) ，$("#foo > div").length和 $('#foo').children().length的结果是相同的(Jsfiddle)。但是，为了得到正确的答案只’div’子，一个应该使用正确的和更好的性能子选择器

小开

为了响应 mrCoders 使用 jsperf 的回答，为什么不使用 dom 节点呢？

var $foo = $('#foo');
var count = $foo[0].childElementCount

你可以试试这个测试: http://jsperf.com/jquery-child-ele-size/7

这种方法可以得到46,095个运算速度，而其他方法最多只能得到2000个运算速度

小开

使用最新版本的 jquery，您可以使用 $("#superpics div").children().length。

小开 
var divss = 0;
$(function(){
$("#foo div").each(function(){
divss++;


});
console.log(divss);
});
<div id="foo">
<div id="bar" class="1"></div>
<div id="baz" class="1"></div>
<div id="bam" class="1"></div>
</div>
小开 
$('#foo').children('div').length
小开

对于 div 类型的直接子元素，请尝试这样做

$("#foo > div")[0].children.length

提交答案