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
la source
1
oublier jquerydocument.querySelectorAll('ul li').length
caub

Réponses:

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

Essayez d'utiliser: 

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

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