jQuery: Anzahl der Listenelemente zählen?

134

Ich habe eine Liste, die aus serverseitigem Code generiert wird. Bevor ich mit jQuery zusätzliches Material hinzufüge, muss ich herausfinden, wie viele Elemente bereits darin enthalten sind.

<ul id="mylist">
    <li>Element 1</li>
    <li>Element 2</li>
</ul>
jquery html Tom
quelle

Antworten:

225

Versuchen:

$("#mylist li").length

Nur neugierig: Warum müssen Sie die Größe kennen? Kannst du nicht einfach benutzen:

$("#mylist").append("<li>New list item</li>");

?

Cletus
quelle
3
Ich verwende das Anhängen, um die neuen hinzuzufügen, aber ich habe eine Begrenzung für die Anzahl der Elemente, die in der Liste enthalten sein können. In diesem Status kann der Benutzer immer noch maximal 4 Elemente hinzufügen, aber möglicherweise sind 2 gekommen aus dem vorherigen Zustand. :)
Tom
35
Beachten Sie, dass in den jQyery-Dokumenten die Verwendung von .lengthover empfohlen wird .size(), um den Overhead eines Funktionsaufrufs zu vermeiden. api.jquery.com/size
Joe
4
size () war in jquery 1.8 veraltet und es heißt, jetzt length () zu verwenden .
gloomy.penguin
8
@ gloomy.penguin Beachten Sie, dass dies .lengthkeine Funktion ist.
Hexacyanid
Ich benötige die Anzahl <li>, um die Elementbreite im laufenden Betrieb neu berechnen zu können.
Hristo
51 
var listItems = $("#myList").children();

var count = listItems.length;

Natürlich können Sie dies mit verdichten

var count = $("#myList").children().length;

Weitere Hilfe zu jQuery finden Sie unter http://docs.jquery.com/Main_Page .

Nick Allen
quelle
5
Um sicher zu gehen, machen Sie $ ("# myList"). children ("li"). length; Wenn Sie aus irgendeinem Grund jemals andere Elemente in die Liste aufnehmen, werden Sie diese kleine Codezeile nicht vergessen.
SgtPooki
10

Sie haben das gleiche Ergebnis, wenn Sie die Methode .size () oder die Eigenschaft .length aufrufen, aber die Eigenschaft .length wird bevorzugt, da sie nicht den Overhead eines Funktionsaufrufs hat. Also der beste Weg:

$("#mylist li").length
Alex Nguyen
quelle
4

Ich denke, das sollte es tun:

var ct = $('#mylist').children().size();
Andrew Barrett
quelle
4

und natürlich folgendes:

var count = $("#myList").children().length;

kann auf Folgendes komprimiert werden: (durch Entfernen der 'var', die zum Setzen einer Variablen nicht erforderlich ist)

count = $("#myList").children().length;

Dies ist jedoch sauberer: 

count = $("#mylist li").size();
ROARSTAR
quelle
2
Zählt diese Methode nicht auch li-Tags in untergeordneten ul-Elementen der obersten ul?
atripes
2
Die Aussage "'var' ist nicht erforderlich, um eine Variable festzulegen" ist zu einfach. Wenn Sie 'var' nicht verwenden, werden alle Ihre Variablen global. Siehe stackoverflow.com/questions/1470488/…
Rafael Almeida
3

Versuchen

$("#mylist").children().length
Nui_CpE
quelle
1

Anzahl der Listenelemente zählen

alert($("#mylist > li").length);
M. Ganji
quelle
1

Ein weiterer Ansatz zum Zählen der Anzahl der Listenelemente:

var num = $("#mylist").find("li").length;
console.log(num);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mylist">
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
  <li>Element 4</li>
  <li>Element 5</li>
</ul>
Erweitern Sie das Snippet

Penny Liu
quelle
0 

$("button").click(function(){
    alert($("li").length);
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Count the number of specific elements</title>
</head>
<body>
<ul>
  <li>List - 1</li>
  <li>List - 2</li>
  <li>List - 3</li>
</ul>
  <button>Display the number of li elements</button>
</body>
</html>
Erweitern Sie das Snippet

Bashirpour
quelle