Contare gli elementi div figlio immediati utilizzando jQuery

Question

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 contare il numero di figli immediati di foo , che sono di tipo div ? Nell'esempio sopra, il risultato dovrebbe essere due ( bar e baz ).

Answer 1

$("#foo > div").length

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

Answer 2

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

Ho creato un jsperf per vedere la differenza di velocità e il children () ha battuto l'approccio selettore figlio (#foo > div) di almeno 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).

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

[Aggiorna] A causa del markup errato riscontrato nell'OP (prima dell'aggiornamento 'markup validated' da parte mia), entrambi $ (" #foo > div "). lunghezza & amp; $ ('# foo'). children (). length ha prodotto lo stesso risultato ( jsfiddle ). Ma per una risposta corretta per ottenere SOLO figli "div", un DOVREBBE usare il selettore figlio per & amp; migliori prestazioni

Answer 3

$("#foo > div") 

seleziona tutti i div che sono i 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

Answer 4

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

Answer 5

In risposta alla risposta di mrCoder 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

Answer 6

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

Answer 7

$("#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 usa la proprietà .length. Da qui: http://www.electrictoolbox.com/get-total -Numero-elementi abbinati-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();

o

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

---

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

Answer 10

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

Answer 11

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