it-swarm.com.de

Zählen Sie unmittelbare 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 von foo, die vom Typ div sind? Im obigen Beispiel sollte das Ergebnis zwei sein (bar und baz).

173
Dónal
$("#foo > div").length

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

331
Garry Shutler

Ich empfehle die Verwendung von $('#foo').children().size() für eine bessere Leistung.

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

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

[Update] Ich habe den Test so aktualisiert, dass er den Test für Größe () und Länge enthält. Dabei macht es keinen großen Unterschied (Ergebnis: length Verwendung ist etwas schneller (2%) als size())

[Update] Aufgrund des falschen Markups im OP (vor dem von mir validierten 'Markup'-Update) haben beide $("#foo > div").length & $('#foo').children().length dasselbe Ergebnis erzielt ( jsfiddle ). Damit die richtige Antwort jedoch NUR "div" Kinder ergibt, SOLLTE man den Child-Selector verwenden, um eine korrekte und bessere Leistung zu erzielen

68
manikanta
$("#foo > div") 

wählt alle Divs aus, die unmittelbare Nachkommen von #foo sind
Sobald Sie den Satz von Kindern haben, können Sie entweder die Größenfunktion verwenden:

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

oder Sie können verwenden

$("#foo > div").length

Beide geben das gleiche Ergebnis zurück

25
Darko Z
$('#foo').children('div').length
14
Abdennour TOUMI

Als Antwort auf mrCoders antworte 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 erhält 46.095 op/s, während die anderen Methoden höchstens 2000 op/s erreichen

8
HaxElit
$('#foo > div').size()
6
gizmo
$("#foo > div").length

jQuery verfügt über eine Funktion .size (), die die Häufigkeit zurückgibt, mit der ein Element angezeigt wird. Wie in der jQuery-Dokumentation angegeben, ist es jedoch langsamer und gibt denselben Wert wie die Eigenschaft .length zurück. Verwenden Sie daher am besten einfach die. Länge Eigenschaft. Von hier aus: http://www.electrictoolbox.com/get-total-number-matched-elements-jquery/

5
zholdas
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>
4
John Alvarez
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 "P.C".
Ich hatte ein ähnliches Problem mit meiner Seite.
Lassen Sie vorerst einfach das> weg und es sollte gut funktionieren.

2
Andrew Perkins

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

2
Kent Thomas
$("div", "#superpics").size();
1