JQuery kullanarak hemen alt div öğelerini sayma

Aşağıdaki HTML düğümü yapısı var:

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

fooBu türden olan yakın çocukların sayısını nasıl hesaplayabilirim div? Yukarıdaki örnekte, sonuç iki ( barve baz) olmalıdır.

$("#foo > div").length

Div 'olan' foo 'kimliğine sahip öğenin doğrudan alt öğeleri. Daha sonra üretilen sargılı setin boyutunu almak.

Kullanmanızı öneririm $('#foo').children().size() iyi performans için .

Ben oluşturduk jsperf hız farkını görmek için testi children()en azından tarafından çocuk seçici dayak yöntemi (#foo> div) yaklaşımını % 60 Chrome'da (kanarya inşa v15) 20-30% Firefox'ta (v4) .

Bu arada, söylemeye gerek yok, bu iki yaklaşım aynı sonuçları üretir (bu durumda, 1000).

[Güncelleme] Boyutu () ve uzunluk testini içerecek şekilde testi güncelledim ve çok fazla fark yaratmıyorlar (sonuç: lengthkullanım biraz daha hızlı (% 2) size())

[Güncelleme] nedeniyle OP görülen yanlış biçimlendirme için (bana göre 'biçimlendirme Validated' güncelleme öncesi), hem $("#foo > div").length& $('#foo').children().lengthaynı (sonuçlanmıştır jsfiddle ). Ancak SADECE 'div' çocukları elde etmek için doğru cevap için, doğru ve daha iyi performans için çocuk seçiciyi KULLANMALIDIR

$("#foo > div") 

#foo öğesinin hemen torunları olan tüm div'leri seçer
, çocuk setiniz varsa size boyut işlevini kullanabilirsiniz:

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

ya da kullanabilirsiniz

$("#foo > div").length

Her ikisi de size aynı sonucu döndürür

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

MrCoders jsperf kullanarak yanıt olarak neden sadece dom düğümü kullanmıyorsunuz?

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

Testi burada deneyebilirsiniz: http://jsperf.com/jquery-child-ele-size/7

Bu yöntem 46.095 op / s alırken, diğer yöntemler en iyi 2000 op / s alır

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

$("#foo > div").length

jQuery, bir öğenin görüntülenme sayısını döndürecek bir .size () işlevine sahiptir, ancak jQuery belgelerinde belirtildiği gibi, daha yavaştır ve .length özelliğiyle aynı değeri döndürür, bu nedenle yalnızca. uzunluk özelliği. Buradan: http://www.electrictoolbox.com/get-total-number-matched-elements-jquery/

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>

Jquery'nin en son sürümü ile kullanabilirsiniz $("#superpics div").children().length.

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

veya

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

Daha önce de söylendiği gibi, her ikisi de aynı sonucu verir.
Ancak size () işlevi daha fazla jQuery "PC" dir.
Sayfamla benzer bir sorun yaşadım.
Şimdilik,> işaretini atlayın ve iyi çalışmalıdır.

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

Div türündeki hemen alt öğeler için bunu deneyin

$("#foo > div")[0].children.length