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>

タイプfoodivの直接の子の数をカウントするにはどうすればよいですか?上記の例では、結果は2つ(barbaz)になります。

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