Wie kann ich die Anzahl der Kinder zählen?

108

Ich habe eine Liste

<ul>
  <li>
  <li>
  <li>
  ...
</ul>

Ich benötige jQuery, um die Anzahl der Elemente in meiner Liste zu zählen.

jquery

— aneuryzm
quelle

1

vergiss jquerydocument.querySelectorAll('ul li').length

— caub

188

Sie können .lengthwie folgt verwenden:

var count = $("ul li").length;

.lengthGibt an, wie viele Übereinstimmungen der Selektor gefunden hat. Dies zählt also, wie viele <li>unter <ul>Elementen Sie haben. Wenn Unterkinder vorhanden sind, verwenden Sie "ul > li"stattdessen, um nur direkte Kinder zu erhalten. Wenn <ul>Ihre Seite andere Elemente enthält, ändern Sie einfach den Selektor so, dass er nur seinem entspricht, z. B. wenn er eine ID enthält, die Sie verwenden möchten "#myListID > li".

In anderen Situationen, in denen Sie den untergeordneten Typ nicht kennen, können Sie den *(Platzhalter-) Selektor verwenden oder .children()wie folgt:

var count = $(".parentSelector > *").length;

oder:

var count = $(".parentSelector").children().length;

— Nick Craver
quelle

1

Was ist, wenn nicht bekannt ist, dass das Kind "li" ist und alles sein könnte?

— Starx

7

@ Starx:$("#parent").children().length

— Rekamoyka

1

@AlecAnanian, Nein, ich weiß wie. Ich hatte gehofft, Nick würde das auch zu seiner Antwort hinzufügen.

— Starx

2

@ Starx - hinzugefügt, falls es ein paar Leuten auf der Straße hilft :)

— Nick Craver

Was ist, wenn das Element nicht sichtbar ist?

— ʙᴀᴋᴇʀ ʙᴀᴋᴇʀ

6

Dafür benötigen Sie jQuery nicht. Sie können JavaScript verwenden .childNodes.length.

Stellen Sie einfach sicher, dass Sie 1 subtrahieren, wenn Sie den Standardtextknoten (der standardmäßig leer ist) nicht einschließen möchten. Daher würden Sie Folgendes verwenden:

var count = elem.childNodes.length - 1;

— Zach Saucier
quelle

1

Versuchen Sie, Folgendes zu verwenden:

var count = $("ul > li").size();
alert(count);

0

Was passiert , wenn Sie diese den aktuellen Selektor zu bestimmen , werden mit ihren Kindern zu finden , so gilt dies: <ol>dann gibt es <li>s unter , wie ein Wähler schreiben var count = $(this+"> li").length;nicht funktionieren ..

— Oguzhan
quelle

Wenn der Ol eine Klasse hat, können Sie schreiben$("ol.class > li").length

— Qwerty

0

Sie können dies mit jQuery tun:

Diese Methode ruft eine Liste ihrer untergeordneten Elemente ab und zählt dann die Länge dieser Liste, so einfach ist das.

$("ul").find("*").length;

Die find () -Methode durchläuft das DOM entlang der Nachkommen nach unten bis zum letzten Nachkommen.

Hinweis: Die child () -Methode durchläuft eine einzelne Ebene im DOM-Baum.

— Youssof H.
quelle