jQuery: compte le nombre d'éléments de la liste?

134

J'ai une liste qui est générée à partir d'un code côté serveur, avant d'y ajouter des éléments supplémentaires avec jQuery, je dois déterminer le nombre d'éléments qui s'y trouvent déjà.

<ul id="mylist">
    <li>Element 1</li>
    <li>Element 2</li>
</ul>
jquery html À M
la source

Réponses:

225

Essayer:

$("#mylist li").length

Juste curieux: pourquoi avez-vous besoin de connaître la taille? Ne pouvez-vous pas simplement utiliser:

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

?

cletus
la source
3
J'utilise l'ajout pour ajouter les nouveaux, mais j'ai une limite sur le nombre d'éléments qui peuvent être dans la liste, dans cet état, l'utilisateur peut toujours ajouter jusqu'à un maximum de 4 éléments, mais 2 pourraient être venus de l'état précédent. :)
Tom
35
Notez que la documentation jQyery recommande d'utiliser .lengthover .size()pour éviter la surcharge d'un appel de fonction. api.jquery.com/size
Joe
4
size () était obsolète dans jquery 1.8 et il est dit d'utiliser length () maintenant.
gloomy.penguin
8
@ gloomy.penguin Notez que ce .lengthn'est pas une fonction.
hexacyanide
J'ai besoin du compte <li> pour recalculer la largeur de l'élément à la volée.
Hristo
51 
var listItems = $("#myList").children();

var count = listItems.length;

Bien sûr, vous pouvez condenser cela avec

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

Pour plus d'aide avec jQuery, http://docs.jquery.com/Main_Page est un bon point de départ.

Nick Allen
la source
5
juste pour être sûr, faites $ ("# myList"). children ("li"). length; Si jamais vous ajoutez d'autres éléments dans la liste pour une raison quelconque, vous n'oublierez pas cette petite ligne de code.
SgtPooki
10

Vous obtenez le même résultat lors de l'appel de la méthode .size () ou de la propriété .length, mais la propriété .length est préférée car elle n'a pas la surcharge d'un appel de fonction. Donc le meilleur moyen:

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

Je pense que cela devrait le faire:

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

et bien sûr ce qui suit:

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

peut être condensé en: (en supprimant le 'var' qui n'est pas nécessaire pour définir une variable)

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

cependant c'est plus propre: 

count = $("#mylist li").size();
ROARSTAR
la source
2
Cette méthode ne compte-t-elle pas également les balises li dans les éléments ul enfants du ul supérieur?
atripes
2
Dire "'var' n'est pas nécessaire pour définir une variable" est une simplification excessive. Si vous n'utilisez pas 'var', toutes vos variables finiront par être globales. Voir stackoverflow.com/questions/1470488/…
Rafael Almeida
3

essayer

$("#mylist").children().length
Nui_CpE
la source
1

Compter le nombre d'éléments de liste

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

Une autre approche pour compter le nombre d'éléments de liste:

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>
Développer l'extrait

Penny Liu
la source
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>
Développer l'extrait

Bashirpour
la source