jQuery compte le nombre de divs avec une certaine classe ?

Question

Envisageant quelque chose comme ça ;

<div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

Comment pourrais-je, en utilisant jQuery (ou le simple JS, s'il est plus court - mais j'en doute) compter le nombre de divs avec la classe "item" ? Dans cet exemple, la fonction devrait retourner 5, car il y a 5 divs avec la classe "item".

Gracias.

Answer 1

Vous pouvez utiliser l'outil jquery .longueur propriété

var numItems = $('.item').length;

Answer 2

Pour de meilleures performances, vous devriez utiliser :

var numItems = $('div.item').length;

Puisqu'il ne cherchera que le div éléments dans DOM et sera rapide.

Suggestion : en utilisant size() au lieu de length signifie une étape supplémentaire dans le traitement puisque SIZE() utilise length dans la définition de la fonction et renvoie le résultat.

Answer 3

Vous pouvez utiliser la propriété jQuery.children.

var numItems = $('.wrapper').children('div').length;

pour plus d'informations, voir http://api.jquery.com/

Answer 4

Et pour la réponse en js simple si quelqu'un est intéressé ;

var count = document.getElementsByClassName("item");

A la vôtre.

Référence : https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

Answer 5

Je viens de créer cette fonction js en utilisant la fonction jQuery size http://api.jquery.com/size/

function classCount(name){
  alert($('.'+name).size())
}

Il signale le nombre de fois où le nom de la classe apparaît dans le document.