Graf sofort Kind div-Elemente mit jQuery

Question

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 div ist? In dem obigen Beispiel sollte das Ergebnis sein, zwei (bar und baz).

Answer 1

$("#foo > div").length

Direkt Kinder des Elements mit der ID ‚foo‘, die divs sind. Dann Abrufen der Größe des umschlossenen Satz erzeugt wird.

Answer 2

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

Ich habe einen jsperf Test erstellt den Kindselektor geschlagen die Geschwindigkeitsdifferenz und die children() Methode, um zu sehen ( #foo> div) Ansatz von mindestens 60% in Chrome (Kanarienvogel build v15) 20-30% in Firefox (v4).

Durch die Art und Weise, unnötig zu sagen, produzieren diese beiden Ansätze gleiche Ergebnisse (in diesem Fall 1000).

[Update] ich den Test aktualisiert habe die Größe () vs Längentest umfassen, und sie machen nicht viel Unterschied machen (Ergebnis: length Nutzung ist etwas schneller (2%) als size())

[Update] Aufgrund der falschen Markup im OP gesehen (vor 'validierten Markup' update von mir), die beide $("#foo > div").length & $('#foo').children().length die gleichen Folge ( jsfiddle ). Aber für die richtige Antwort zu bekommen NUR 'DIV Kinder, sollte ein Kind Wähler für eine korrekte und eine bessere Leistung verwenden

Answer 3

$("#foo > div") 

wählt alle div-Tags, die unmittelbaren Nachkommen von #foo
sind wenn Sie den Satz von Kindern haben, können Sie entweder die Größe Funktion:

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

oder Sie verwenden können,

$("#foo > div").length

Beide kehren Sie das gleiche Ergebnis

Answer 4

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

Answer 5

Als Reaktion auf mrCoders Anruf mit jsperf warum nicht nur den DOM-Knoten verwenden?

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

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

Diese Methode erhält 46.095 op / s, während die anderen Methoden am besten 2000 op / s

Answer 6

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

Answer 7

$("#foo > div").length

jQuery hat eine .Size () Funktion, die die Anzahl der Male zurückkehren wird, dass ein Element erscheint aber, wie in der jQuery-Dokumentation angegeben, es ist langsamer und gibt den gleichen Wert wie die .length Eigenschaft, so dass es am besten ist, einfach zu verwenden Sie die .length Eigenschaft. Von hier aus: http://www.electrictoolbox.com/get-total -Nummer-matched-Elemente-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();

oder

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

---

Wie bereits gesagt, beide Rück das gleiche Ergebnis.
Aber die Größe () Funktion ist jQuery „P.C.“.
Ich hatte ein ähnliches Problem mit meiner Seite.
Vorerst auf, nur das weglassen> und es sollte funktionieren.

Answer 10

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

Answer 11

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