Zählen Sie sofortige untergeordnete div-Elemente mit jQuery

180

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.

Dónal
quelle
1
Ich habe einen jsperf-Test hinzugefügt, um den Geschwindigkeitsunterschied zwischen verschiedenen Ansätzen zu sehen. siehe meine Antwort unten
Manikanta

Antworten:

345
$("#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.

Garry Shutler
quelle
1
Ich habe mich am Freitag nur gefragt, wie man Tabellenspalten mit jQuery zählt. Ich muss einen ähnlichen Ansatz ausprobieren : $('#table > th').size().
Jim Schubert
1
Manchmal funktioniert das nicht und Sie müssen $ ('# foo'). Children (). Size () verwenden, was laut @mrCoder
472084
Wenn ich dies anstelle von #foo verwenden möchte, dann. Wie verwende ich das?
Mukesh
@ 472084 Wenn Sie es so machen, würde es auch das "span" -Element zählen. Beachten Sie, wie die Frage angibt, dass er nur die "div" -Elemente zählen möchte, nicht alle Elemente.
Angel Blanco
68

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

Manikanta
quelle
Obwohl diese Frage vor
einiger
Wo werden dort nur "div" -Kinder gefiltert?
Andrey Tserkus
2
.lengthist in der Tat die bevorzugte Methode, da sie nicht den Overhead eines Funktionsaufrufs hat.
Nic Aitch
Ja, der untergeordnete Selektor ist korrekt, da er native CSS-Selektoren verwendet, sodass die Auswahl in C ++ und nicht in JavaScript geschrieben ist ... Ein ziemlicher Leistungsunterschied. Diese Antwort ist leichter zu verstehen, aber viel langsamer.
Mdenton8
@manikanta Hey, sehr detaillierter Anser. Tut mir leid, eine Frage. Wenn ich $('#extraLinks').children().size()Textfelder in einem div (mit dem Namen extraLinks) zählen möchte, warum erhalte ich, 4wenn sie nur 2 sind. Im Allgemeinen wird die Länge mit 2 multipliziert ... Irgendeine Idee warum? Danke
Slevin
25
$("#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

Darko Z.
quelle
17
$('#foo').children('div').length
Abdennour TOUMI
quelle
8

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

HaxElit
quelle
2
Das OP bat nur um div
untergeordnete
6
$('#foo > div').size()
Gizmo
quelle
5
$("#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/

zholdas
quelle
5
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>
John Alvarez
quelle
3

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

Kent Thomas
quelle
2
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.

Andrew Perkins
quelle
Descendant Selector gibt alle Nachkommen von #superpics zurück, einschließlich Kind, Enkel, Urenkel usw. dieses Elements, nicht nur unmittelbare Kinder
manikanta
mehr jQuery "PC". meint ?
Ghanshyam Lakhani
1
$("div", "#superpics").size();
Alexandros Ioannou
quelle
1
Das zählt alle div Nachkommen, nicht nur die Kinder.
Felix Kling
-1

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

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