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

Question

次のHTMLノード構造を持っています：

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

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

Answer 1

$("#foo > div").length

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

Answer 2

パフォーマンスを向上させるには、 $（ '＃foo'）。children（）。size（）を使用することをお勧めします。

jsperf テストを作成して、速度の違いと children（）メソッドは、Chrome（カナリアビルドv15）で 60％で子セレクター（#foo＆gt; div）アプローチを破りました。Firefox（v4で 20-30％ ）。

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

[更新] size（）対lengthテストを含めるようにテストを更新しましたが、それほど違いはありません（結果： length の使用は、 size（））

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

Answer 3

$("#foo > div") 

#foo
の直接の子孫であるすべてのdivを選択します 子のセットを取得したら、size関数を使用できます。

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

または使用できます

$("#foo > div").length

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

Answer 4

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

Answer 5

mrsCodersへの応答で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プロパティと同じ値を返すため、単純に最適です.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>

Answer 9

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

または

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

---

すでに述べたように、どちらも同じ結果を返します。
しかし、size（）関数はより多くのjQuery＆quot; P.C＆quot;です。
ページで同様の問題が発生しました。
ここでは、＆gt;を省略します。正常に動作するはずです。

Answer 10

jqueryの最新バージョンでは、 $（＆quot; #superpics div＆quot;）。children（）。length を使用できます。

Answer 11

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