Contare gli elementi div figlio immediati utilizzando jQuery

Ho la seguente struttura di nodi HTML:

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

Come posso contare il numero di figli immediati di foo, che sono di tipo div? Nell'esempio sopra, il risultato dovrebbe essere due ( bare baz).

$("#foo > div").length

Dirigi i figli dell'elemento con l'id 'pippo' che sono div. Quindi recuperare le dimensioni del set avvolto prodotto.

Raccomando di usare $('#foo').children().size() per prestazioni migliori.

Ho creato un test jsperf per vedere la differenza di velocità e il children()metodo ha battuto l'approccio selettore figlio (#foo> div) di almeno il 60% in Chrome (canary build v15) 20-30% in Firefox (v4).

A proposito, inutile dirlo, questi due approcci producono gli stessi risultati (in questo caso, 1000).

[Aggiornamento] Ho aggiornato il test per includere il test size () vs lunghezza e non fanno molta differenza (risultato: l' lengthutilizzo è leggermente più veloce (2%) rispetto a size())

[Aggiornamento] A causa del markup errato visto nell'OP (prima dell'aggiornamento 'markup validated' da parte mia), entrambi $("#foo > div").lengthe $('#foo').children().lengthlo stesso risultato ( jsfiddle ). Ma per una risposta corretta per ottenere SOLO bambini "div", un DOVREBBE utilizzare il selettore figlio per prestazioni corrette e migliori

$("#foo > div") 

seleziona tutti i div che sono discendenti immediati di #foo
una volta che hai il set di figli puoi usare la funzione size:

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

oppure puoi usare

$("#foo > div").length

Entrambi ti restituiranno lo stesso risultato

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

In risposta a mrCoders rispondi usando jsperf perché non usare semplicemente il nodo dom?

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

Puoi provare il test qui: http://jsperf.com/jquery-child-ele-size/7

Questo metodo ottiene 46.095 op / s mentre gli altri metodi nella migliore delle ipotesi 2000 op / s

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

$("#foo > div").length

jQuery ha una funzione .size () che restituirà il numero di volte in cui appare un elemento ma, come specificato nella documentazione di jQuery, è più lento e restituisce lo stesso valore della proprietà .length, quindi è meglio semplicemente usare il file. proprietà length. Da qui: 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>

Con la versione più recente di jquery, è possibile utilizzare $("#superpics div").children().length.

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

o

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

Come già detto, entrambi restituiscono lo stesso risultato.
Ma la funzione size () è più "PC" jQuery.
Ho avuto un problema simile con la mia pagina.
Per ora, basta omettere il> e dovrebbe funzionare bene.

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

Prova questo per elementi figlio immediati di tipo div

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