Comment récupérer le nombre d’éléments dans une DIV avec jQuery

Vous pouvez utiliser la propriété .length de jQuery pour trouver le nombre d’éléments dans une DIV ou de tout autre élément. L’exemple suivant affichera le nombre de paragraphes dans une DIV ayant la classe « .exemple ».
 
 

Code source :

$(document).ready(function() {
    var paragraphe = $(".exemple p");
    alert("Nombre de paragraphes dans div est " + paragraphe.length);
});

<div class="exemple">
    <p>Paragraphe 1</p>
    <p>Paragraphe 2</p>
    <p>Paragraphe 3</p>
    <p>Paragraphe 4</p>
    <p>Paragraphe 5</p>
</div>

Sortie:

Nombre de paragraphes dans div est  5

Pourtant, si vous souhaitez connaitre le nombre d’éléments enfants indépendamment de leur type, utilisez simplement le sélecteur universel (*), comme ceci:

$(document).ready(function() {
    var element = $(".exemple *");
    alert("Nombre d'éléments dans div est " + element.length);
});

<div class="exemple">
    <span>lorem ipsum</span>
    <p>Paragraphe</p>
    <h1>Titre</h1>
</div>

Sortie:

Nombre d'éléments dans div est 3