[英]Count immediate child div elements using jQuery
I have the following HTML node structure:我有以下 HTML 节点结构:
<div id="foo">
<div id="bar"></div>
<div id="baz">
<div id="biz"></div>
</div>
<span></span>
</div>
How do I count the number of immediate children of foo
, that are of type div
?我如何计算
foo
类型div
的直接子代的数量? In the example above, the result should be two ( bar
and baz
).在上面的例子中,结果应该是两个(
bar
和baz
)。
$("#foo > div").length
Direct children of the element with the id 'foo' which are divs. 带有id为“foo”的元素的直接子元素是div。 Then retrieving the size of the wrapped set produced.
然后检索生成的包装集的大小。
I recommend using $('#foo').children().size()
for better performance. 我建议使用
$('#foo').children().size()
以获得更好的性能。
I've created a jsperf test to see the speed difference and the children()
method beaten the child selector (#foo > div) approach by at least 60% in Chrome (canary build v15) 20-30% in Firefox (v4). 我创建了一个jsperf测试,看速度差和
children()
方法,通过至少60%的铬(金丝雀构建V15)20-30%在Firefox殴打孩子选择器(#foo> DIV)的方法(第4版) 。
By the way, needless to say, these two approaches produce same results (in this case, 1000). 顺便说一句,不用说,这两种方法产生相同的结果(在这种情况下,1000)。
[Update] I've updated the test to include the size() vs length test, and they doesn't make much difference (result: length
usage is slightly faster (2%) than size()
) [更新]我已经更新了测试以包括size()vs长度测试,并且它们没有太大区别(结果:
length
使用比size()
略快(2% size()
)
[Update] Due to the incorrect markup seen in the OP (before 'markup validated' update by me), both $("#foo > div").length
& $('#foo').children().length
resulted the same ( jsfiddle ). [更新]由于OP中看到的标记不正确(在我更新'标记验证'之前),
$("#foo > div").length
和$('#foo').children().length
结果相同( jsfiddle )。 But for correct answer to get ONLY 'div' children, one SHOULD use child selector for correct & better performance 但是为了获得正确的答案来获得'div'的孩子,一个人应该使用子选择器来获得正确和更好的表现
$("#foo > div")
selects all divs that are immediate descendants of #foo 选择所有作为#foo的直接后代的div
once you have the set of children you can either use the size function: 一旦你拥有了一组孩子,你可以使用size函数:
$("#foo > div").size()
or you can use 或者你可以使用
$("#foo > div").length
Both will return you the same result 两者都会返回相同的结果
$('#foo').children('div').length
In response to mrCoders answer using jsperf why not just use the dom node ? 为了响应mrCoders使用jsperf回答为什么不只是使用dom节点?
var $foo = $('#foo');
var count = $foo[0].childElementCount
You can try the test here: http://jsperf.com/jquery-child-ele-size/7 您可以在这里尝试测试: http : //jsperf.com/jquery-child-ele-size/7
This method gets 46,095 op/s while the other methods at best 2000 op/s 此方法获得46,095 op / s,而其他方法最高2000 op / s
$('#foo > div').size()
$("#foo > div").length
jQuery has a .size() function which will return the number of times that an element appears but, as specified in the jQuery documentation, it is slower and returns the same value as the .length property so it is best to simply use the .length property. jQuery有一个.size()函数,它将返回元素出现的次数,但是,如jQuery文档中所指定的,它较慢并且返回与.length属性相同的值,因此最好只使用。长度属性。 From here: http://www.electrictoolbox.com/get-total-number-matched-elements-jquery/
从这里: http : //www.electrictoolbox.com/get-total-number-matched-elements-jquery/
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>
使用最新版本的jquery,您可以使用$("#superpics div").children().length
。
var n_numTabs = $("#superpics div").size();
or 要么
var n_numTabs = $("#superpics div").length;
As was already said, both return the same result. 如前所述,两者都返回相同的结果。
But the size() function is more jQuery "PC". 但是size()函数更像是jQuery“PC”。
I had a similar problem with my page. 我的页面遇到了类似的问题。
For now on, just omit the > and it should work fine. 现在,只要省略>,它应该工作正常。
$("div", "#superpics").size();
对 div 类型的直接子元素试试这个
$("#foo > div")[0].children.length
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.