JQUERY > compter le nombre d’enfants

Prenons, par exemple, cette structure :

 

<ul>

   <li>

   <li>

   ...

</ul>

 

Comment connaitre le nombre de <li> (qui sont enfants de <ul>) ?

 

Première méthode : .length

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

ou

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

 

ATTENTION !

.length prend en compte tous les li contenus dans le ul. Si un autre ul est présent avec d’autres li, alors ceux-ci seront pris en compte.

Pour compter les li enfants directs, utiliser "ul > li"

 

On peut utiliser l’ID du parent : "#maListe > li"

On peut utiliser la classe du parent : ".maListe > li"

 

 

Si le type des enfants est inconnu : utiliser le sélecteur * (astérisque) ou .children():
var count = $(".parentSelector > *").length;
ou
var count = $(".parentSelector").children().length;

 

 

Il est possible de ne pas utiliser jQuery :

On utilise le .childNodes.length de JS en soustrayant 1 :
var count = elem.childeNodes.length - 1;

 

 

Deuxième méthode : .size()

 

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