Comment puis-je compter le nombre d'enfants?

108

J'ai une liste

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

J'ai besoin de jQuery pour compter le nombre d'éléments dans ma liste.

jquery

— aneuryzm
source

1

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

— caub

188

Vous pouvez utiliser .length, comme ceci:

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

.lengthindique le nombre de correspondances trouvées par le sélecteur, donc cela compte le nombre d' éléments <li>sous que <ul>vous avez ... s'il y a des sous-enfants, utilisez à la "ul > li"place pour obtenir uniquement des enfants directs . Si vous avez d'autres <ul>éléments dans votre page, changez simplement le sélecteur pour qu'il corresponde uniquement au sien, par exemple s'il a un identifiant que vous utiliseriez "#myListID > li".

Dans d'autres situations où vous ne connaissez pas le type enfant, vous pouvez utiliser le *sélecteur (générique), ou .children(), comme ceci:

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

ou:

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

— Nick Craver
source

1

Et si, on ne savait pas que l'enfant est "li", et pourrait être n'importe quoi?

— Starx

7

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

— rekamoyka

1

@AlecAnanian, non, je sais comment. Je veux dire, j'espérais que Nick ajouterait cela à sa réponse aussi.

— Starx du

2

@Starx - ajouté au cas où cela aiderait quelques personnes sur la route :)

— Nick Craver

Et si l'élément n'est pas visible?

— ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

6

Vous n'avez pas besoin de jQuery pour cela. Vous pouvez utiliser du JavaScript .childNodes.length.

Assurez-vous simplement de soustraire 1 si vous ne souhaitez pas inclure le nœud de texte par défaut (qui est vide par défaut). Ainsi, vous utiliseriez ce qui suit:

var count = elem.childNodes.length - 1;

— Zach Saucier
source

1

Essayez d'utiliser:

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

0

Que faire si vous utilisez ceci pour déterminer le sélecteur actuel pour trouver ses enfants, donc cela est vrai: <ol>alors il y a <li>sous comment écrire un sélecteur var count = $(this+"> li").length;ne fonctionnera pas ...

— Oguzhan
source

si l'ol a une classe, vous pouvez écrire$("ol.class > li").length

— Qwerty

0

Vous pouvez le faire en utilisant jQuery:

Cette méthode obtient une liste de ses enfants puis compte la longueur de cette liste, aussi simple que cela.

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

La méthode find () parcourt le DOM vers le bas le long des descendants, jusqu'au dernier descendant.

Remarque: la méthode children () traverse un seul niveau dans l'arborescence DOM.

— Youssof H.
source