web-dev-qa-db-ja.com

jQueryを使用して直接の子div要素をカウントする

次のHTMLノード構造があります。

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

タイプfooのdivの直接の子の数をカウントするにはどうすればよいですか？上記の例では、結果は2つ（barとbaz）になります。

javascriptjquerydomjquery-selectors
173
Dónal
$("#foo > div").length

Divであるid 'foo'を持つ要素の直接の子。次に、生成されたラップセットのサイズを取得します。

330
Garry Shutler

パフォーマンスを向上させるために$('#foo').children().size()を使用することをお勧めします。

jsperf テストを作成して、速度の違いとchildren()メソッドが子セレクター（#foo> div）アプローチを少なくとも60％Chrome（カナリアビルドv15）20-30％Firefox（v4）。

ところで、言うまでもなく、これら2つのアプローチは同じ結果（この場合は1000）を生成します。

[更新] size（）対lengthテストを含めるようにテストを更新しましたが、大きな違いはありません（結果：lengthの使用はsize()よりもわずかに高速（2％）です）

[更新] OPで誤ったマークアップが表示されたため（「マークアップ検証済み」更新前）、$("#foo > div").lengthと$('#foo').children().lengthの両方が同じ結果になりました（ jsfiddle ）。ただし、「div」の子のみを取得するための正しい答えを得るには、子セレクターを使用してパフォーマンスを向上させる必要があります

68
manikanta
$("#foo > div")

#fooの直接の子孫であるすべてのdivを選択します
一連の子を取得したら、サイズ関数を使用できます。

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

またはあなたが使用することができます

$("#foo > div").length

どちらも同じ結果を返します

25
Darko Z
$('#foo').children('div').length
13
Abdennour TOUMI

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を取得します

8
HaxElit
$('#foo > div').size()
6
gizmo
$("#foo > div").length

jQueryには、要素の出現回数を返す.size（）関数がありますが、jQueryのドキュメントで指定されているように、処理速度が遅く、.lengthプロパティと同じ値を返すため、単に。長さプロパティ。ここから： http://www.electrictoolbox.com/get-total-number-matched-elements-jquery/

5
zholdas
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>
4
John Alvarez
var n_numTabs = $("#superpics div").size();

または

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

すでに述べたように、どちらも同じ結果を返します。
しかし、size（）関数はより多くのjQuery "P.C"です。
ページで同様の問題が発生しました。
今のところ、>を省略するだけで問題なく動作するはずです。

2
Andrew Perkins

Jqueryの最新バージョンでは、$("#superpics div").children().lengthを使用できます。

2
Kent Thomas
$("div", "#superpics").size();
1
Alexandros Ioannou