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

Question

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

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

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

Answer 1

$("#foo > div").length

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

Answer 2

$('#foo').children().size()より良いパフォーマンスのために使用することをお勧めします。

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

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

[更新] size() vs length テストを含むようにテストを更新しましたが、大きな違いはありません (結果:length使用は よりわずかに高速 (2%) ですsize()) 。

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

Answer 3

$("#foo > div") 

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

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

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

$("#foo > div").length

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

Answer 4

jsperf を使用した mrCoders の回答に応えて、DOM ノードを使用しないのはなぜですか?

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

ここでテストを試すことができます: http://jsperf.com/jquery-child-ele-size/7

このメソッドは 46,095 オペレーション/秒を取得しますが、他のメソッドはせいぜい 2000 オペレーション/秒です

Answer 5

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

Answer 6

$("#foo > div").length

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

Answer 7

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 8

jquery の最新バージョンでは、$("#superpics div").children().length.

Answer 9

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