Zählen Sie sofortige untergeordnete div-Elemente mit jQuery

Ich habe die folgende HTML-Knotenstruktur:

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

Wie zähle ich die Anzahl der unmittelbaren Kinder foo, die vom Typ sind div? Im obigen Beispiel sollte das Ergebnis zwei ( barund baz) sein.

$("#foo > div").length

Direkte Kinder des Elements mit der ID 'foo', die divs sind. Rufen Sie dann die Größe des produzierten verpackten Sets ab.

Ich empfehle $('#foo').children().size()für eine bessere Leistung zu verwenden.

Ich habe einen jsperf- Test erstellt, um festzustellen, ob der Geschwindigkeitsunterschied und die children()Methode den Ansatz der untergeordneten Auswahl (#foo> div) in Chrome (canary build v15) um mindestens 60% und in Firefox (v4) um 20-30% übertroffen haben .

Übrigens führen diese beiden Ansätze natürlich zu denselben Ergebnissen (in diesem Fall 1000).

[Update] Ich habe den Test aktualisiert, um den Test size () vs length einzuschließen, und sie machen keinen großen Unterschied (Ergebnis: Die lengthNutzung ist etwas schneller (2%) als size()).

[Update] Aufgrund des falschen Markups im OP (vor dem von mir markierten 'Markup validiert'-Update) haben beide $("#foo > div").length& $('#foo').children().lengthdas gleiche Ergebnis erzielt ( jsfiddle ). Aber für die richtige Antwort, um NUR "div" -Kinder zu bekommen, sollte man die Kinderauswahl verwenden, um eine korrekte und bessere Leistung zu erzielen

$("#foo > div") 

Wählt alle Divs aus, die unmittelbare Nachkommen von #foo sind,
sobald Sie die Menge der untergeordneten Elemente haben. Sie können entweder die Größenfunktion verwenden:

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

oder du kannst verwenden

$("#foo > div").length

Beide geben Ihnen das gleiche Ergebnis zurück

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

Als Antwort auf die Antwort von mrCoders mit jsperf, warum nicht einfach den dom-Knoten verwenden?

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

Sie können den Test hier ausprobieren: http://jsperf.com/jquery-child-ele-size/7

Diese Methode erreicht 46.095 op / s, während die anderen Methoden bestenfalls 2000 op / s erreichen

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

$("#foo > div").length

jQuery verfügt über eine .size () -Funktion, die die Häufigkeit zurückgibt, mit der ein Element angezeigt wird. Wie in der jQuery-Dokumentation angegeben, ist sie jedoch langsamer und gibt denselben Wert wie die .length-Eigenschaft zurück. Verwenden Sie daher am besten einfach die .length-Eigenschaft. Längeneigenschaft. Von hier aus: 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>

Mit der neuesten Version von jquery können Sie verwenden $("#superpics div").children().length.

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

oder

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

Wie bereits gesagt, liefern beide das gleiche Ergebnis.
Aber die size () Funktion ist mehr jQuery "PC".
Ich hatte ein ähnliches Problem mit meiner Seite.
Lassen Sie vorerst einfach das> weg und es sollte gut funktionieren.

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

Versuchen Sie dies für unmittelbare untergeordnete Elemente vom Typ div

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