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


180

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

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

fooタイプの直接の子の数をどのようにカウントしdivますか?上記の例では、結果は2つ(barおよびbaz)になります。


1
さまざまなアプローチの速度の違いを確認するために、jsperfテストを追加しました。以下の私の答えを参照してください
マニカンタ2011

回答:


345
$("#foo > div").length

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


1
私は金曜日にjQueryでテーブルの列をカウントする方法を考えていました。私は同様のアプローチを試す必要があります:$('#table > th').size()
ジムシューベルト、

1
時々これは機能せず、@
'#foo

#fooの代わりにこれを使用したい場合、これを使用するには?
ムケシュ2013

@ 472084そのようにすると、「スパン」要素もカウントされます。質問では、すべての要素ではなく「div」要素のみを数えたいと指定していることに注意してください。
Angel Blanco 14年

68

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

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

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

[更新] size()とlengthのテストが含まれるようにテストを更新しましたが、それほど大きな違いはありません(結果:length使用はよりもわずかに速い(2%)size()

[更新] OPで見られる不正なマークアップのために(私による更新「検証をマークアップ」する前に)、両方$("#foo > div").length$('#foo').children().length同じ(結果jsfiddleを)。しかし、正しい答えが「div」の子だけを取得するためには、正しい&より良いパフォーマンスのために子セレクターを使用する必要があります


この質問はいつか尋ねられますが、これが今から誰かを助けることができるように共有したかっただけです
manikanta

「div」の子だけをフィルタリングする場所はどこですか?
Andrey Tserkus、2011

2
.length関数呼び出しのオーバーヘッドがないため、実際には推奨される方法です。
Nic Aitch、2011

ええ、子セレクターはネイティブCSSセレクターを使用しているので正しいので、選択範囲はJavaScriptではなくC ++で記述されています...かなりパフォーマンスの違いがあります。この答えは理解しやすいですが、かなり遅くなります。
mdenton8 2013

@manikantaねえ、非常に詳細なanser。お手数ですが、1つの質問。$('#extraLinks').children().size()div内のテキストボックス(extraLinksという名前)を数えるのが好きなのに4、2しかないのになぜ取得されるのですか?一般的に、長さを2倍したものになります...なぜでしょうか。ありがとう
slevin 2013年

25
$("#foo > div") 

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

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

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

$("#foo > div").length

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



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です


2
OPは、div子要素のみを要求しました
dj18



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>


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

または

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

すでに述べたように、どちらも同じ結果を返します。
しかし、size()関数はよりjQueryの「PC」です。
ページに同様の問題がありました。
とりあえず、>を省略すれば問題なく動作するはずです。


子孫セレクタは、子、孫、ひ孫など、直属の子だけでなく#superpicsのすべての子孫を返します
manikanta

より多くのjQuery "PC"。手段 ?
Ghanshyam Lakhani 2015


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.