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
source

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
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
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
source

4

Je pense que cela devrait le faire:

var ct = $('#mylist').children().size();

— Andrew Barrett
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
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
source

1

Compter le nombre d'éléments de liste

alert($("#mylist > li").length);

— M.Ganji
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
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
source