使用jQuery计算直接子div元素

180

我具有以下HTML节点结构：

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

我如何计算foo类型的直系子代的数量div？在上面的示例中，结果应为两个（bar和baz）。

— 多纳尔
source

1

我添加了一个jsperf测试，以查看不同方法之间的速度差异。请在下面查看我的答案

— manikanta

345

$("#foo > div").length

ID为'foo'的元素的直接子元素为div。然后检索包装好的包装的尺寸。

— 加里·舒特勒
source

1

我只是在想周五如何使用jQuery计算表列。我将不得不尝试类似的方法：$('#table > th').size()。

— Jim Schubert

1

有时这不起作用，您必须使用$（'＃foo'）。children（）。size（），根据@mrCoder，它还是会更快一些

— 472084 2011年

如果我想使用它而不是#foo，那么如何使用？

— Mukesh

@ 472084如果以这种方式进行操作，它将也计入“ span”元素。注意问题是如何指定他只想计算“ div”元素，而不是所有元素。

— Angel Blanco 2014年

68

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

我创建了一个jsperf测试，以观察速度差异，该children()方法在Chrome（canary build v15）中击败子选择器（#foo> div）的方法至少达到60％，而在Firefox（v4）中则达到20-30％。

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

[更新]我已经更新了测试，包括了size（）vs长度测试，它们并没有太大的差异（结果：length使用情况比的速度稍快（2％）size()）

[更新]由于在OP中看到了错误的标记（在我进行“标记验证”更新之前），两者$("#foo > div").length＆$('#foo').children().length导致相同（jsfiddle）。但是为了获得仅“ div”儿童的正确答案，应该使用儿童选择器以获得正确和更好的性能

— 人体模型
source

尽管这个问题有时会被问到，但只是想分享一下，以便可以从现在开始对他人有所帮助

— manikanta

那里仅过滤“ div”个孩子？

— 2011年

2

.length实际上是首选方法，因为它没有函数调用的开销。

— Nic Aitch

是的，子选择器是正确的，因为它使用本机CSS选择器，所以选择是用C ++而不是JavaScript编写的。这个答案更容易理解，但速度却慢得多。

— mdenton8 2013年

@manikanta嘿，非常详细的分析服务。很抱歉打扰，一个问题。如果我想$('#extraLinks').children().size()对div中的文本框（称为extraLinks）进行计数，为什么4当它们只有2时会出现。通常，我将长度乘以2 ...知道为什么吗？谢谢

— slevin

25

$("#foo > div")

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

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

或者你可以使用

$("#foo > div").length

两者都会返回相同的结果

— 达科Z
source

17

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

— 阿登努尔·图米
source

8

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

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

您可以在此处尝试测试：http : //jsperf.com/jquery-child-ele-size/7

该方法的速度为46,095 op / s，而其他方法的最佳速度为2000 op / s

— HaxElit
source

2

OP仅要求div子元素

— dj18 2012年

6

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

— 小发明
source

5

$("#foo > div").length

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

— Zholdas
source

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>

— 约翰·阿尔瓦雷斯
source

3

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

— 肯特·托马斯
source

2

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

要么

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

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

— 安德鲁·珀金斯
source

后代选择将收益#superpics的所有后代，包括孩子，孙子，曾孙等，该元素，而不仅仅是眼前的孩子

— manikanta

更多jQuery“ PC”。是什么意思？

— Ghanshyam Lakhani 2015年

1

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

— 亚历山德罗斯·约阿努
source

1

这不仅包括孩子，还包括所有 div后代。

— Felix Kling

-1

尝试此操作以查找div类型的直接子元素

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

— 人才makhanya
source