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 ( bar
und baz
) sein.
Antworten:
Direkte Kinder des Elements mit der ID 'foo', die divs sind. Rufen Sie dann die Größe des produzierten verpackten Sets ab.
quelle
$('#table > th').size()
.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
length
Nutzung ist etwas schneller (2%) alssize()
).[Update] Aufgrund des falschen Markups im OP (vor dem von mir markierten 'Markup validiert'-Update) haben beide
$("#foo > div").length
&$('#foo').children().length
das 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 erzielenquelle
.length
ist in der Tat die bevorzugte Methode, da sie nicht den Overhead eines Funktionsaufrufs hat.$('#extraLinks').children().size()
Textfelder in einem div (mit dem Namen extraLinks) zählen möchte, warum erhalte ich,4
wenn sie nur 2 sind. Im Allgemeinen wird die Länge mit 2 multipliziert ... Irgendeine Idee warum? DankeWä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:
oder du kannst verwenden
Beide geben Ihnen das gleiche Ergebnis zurück
quelle
quelle
Als Antwort auf die Antwort von mrCoders mit jsperf, warum nicht einfach den dom-Knoten verwenden?
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
quelle
quelle
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/
quelle
quelle
Mit der neuesten Version von jquery können Sie verwenden
$("#superpics div").children().length
.quelle
oder
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.
quelle
quelle
div
Nachkommen, nicht nur die Kinder.Versuchen Sie dies für unmittelbare untergeordnete Elemente vom Typ div
quelle