188

我有以下 HTML 节点结构：

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

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

4

12 回答 12

359 
$("#foo > div").length

id 为 'foo' 的元素的直接子元素，它们是 div。然后检索生成的包装集的大小。

于 2008-10-30T15:49:53.027 回答
68

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

我创建了一个jsperf测试以查看速度差异，并且该方法在 Chrome（canary build v15）中children()比子选择器（#foo > div）方法至少高出60% ，在 Firefox（v4）中高出20-30% 。

顺便说一句，不用说，这两种方法产生相同的结果（在本例中为 1000）。

[更新] 我已经更新了测试以包括 size() 与长度测试，它们并没有太大区别（结果：length使用率略快 (2%) 比size()）

[更新] 由于在 OP 中看到的标记不正确（在我进行“标记验证”更新之前），两者$("#foo > div").length&$('#foo').children().length结果相同（jsfiddle）。但是为了得到正确的答案，只得到'div'孩子，一个应该使用孩子选择器以获得正确和更好的表现

于 2011-08-16T20:13:15.530 回答
26 
$("#foo > div")

选择所有 div 是 #foo 的直接后代，
一旦您拥有一组孩子，您可以使用 size 函数：

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

或者你可以使用

$("#foo > div").length

两者都会返回相同的结果

于 2008-10-31T01:22:17.350 回答
19 
$('#foo').children('div').length
于 2013-10-23T10:22:35.080 回答
8

为了回应 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

于 2011-09-09T16:50:18.747 回答
6 
$('#foo > div').size()
于 2008-10-30T15:51:10.433 回答
5 
$("#foo > div").length

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

于 2010-12-05T12:50:45.140 回答
5 
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>
于 2013-03-19T22:04:25.100 回答
4

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

于 2012-10-12T17:38:54.153 回答
2 
var n_numTabs = $("#superpics div").size();

或者

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

如前所述，两者都返回相同的结果。
但是 size() 函数更像是 jQuery“PC”。
我的页面也有类似的问题。
现在，只需省略 > 它应该可以正常工作。

于 2009-12-20T22:11:32.367 回答
1 
$("div", "#superpics").size();
于 2010-12-13T14:29:04.747 回答
-1

试试这个 div 类型的直接子元素

$("#foo > div")[0].children.length
于 2019-10-03T07:50:37.383 回答