使用jQuery计算立即子div元素

Question

我有以下HTML节点结构:

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

我如何计算foo类型的直系子女的数量div？在上面的例子中,结果应该是两个(bar和baz).

Answer 1

$("#foo > div").length

带有id为"foo"的元素的直接子元素是div.然后检索生成的包装集的大小.

Answer 2

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

我创建了一个jsperf测试,看速度差和children()至少打孩子选择器(#foo> DIV)的方式方法,60%的铬(金丝雀构建V15)20-30%的Firefox(V4).

顺便说一句,不用说,这两种方法产生相同的结果(在这种情况下,1000).

[更新]我已经更新了测试以包括size()和长度测试,并且它们没有太大区别(结果:length使用率略高于(2%)size())

[更新]由于在OP看到不正确的标记(前"标记验证"由我更新),都$("#foo > div").length与$('#foo').children().length结果相同(的jsfiddle).但是为了获得正确的答案来获得'div'的孩子,一个人应该使用子选择器来获得正确和更好的表现

Answer 3

$("#foo > div") 

选择所有作为#foo的直系后代的div,
一旦你拥有了一组子项,就可以使用size函数:

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

或者你可以使用

$("#foo > div").length

两者都会返回相同的结果

Answer 4

$('#foo').children('div').length

Answer 5

为了响应mrCoders使用jsperf回答为什么不只是使用dom节点？

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

您可以在这里尝试测试:http://jsperf.com/jquery-child-ele-size/7

此方法获得46,095 op/s,而其他方法最高2000 op/s

Answer 6

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

Answer 7

$("#foo > div").length

jQuery有一个.size()函数,它将返回元素出现的次数,但是,如jQuery文档中所指定的,它较慢并且返回与.length属性相同的值,因此最好只使用.长度属性.从这里:http://www.electrictoolbox.com/get-total-number-matched-elements-jquery/

Answer 8

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>