jQuery comptage des éléments par classe - quelle est la meilleure façon de l'implémenter?

373

Ce que j'essaie de faire, c'est de compter tous les éléments de la page en cours avec la même classe, puis je vais l'utiliser pour être ajouté au nom d'un formulaire d'entrée. Fondamentalement, j'autorise les utilisateurs à cliquer sur un <span>, puis en ajoutant un autre pour plus d'éléments du même type. Mais je ne peux pas penser à un moyen de compter tout cela simplement avec jQuery / JavaScript.

J'allais alors nommer l'élément comme quelque chose comme name="whatever(total+1)", si quelqu'un a un moyen simple de le faire, je serais extrêmement reconnaissant car JavaScript n'est pas exactement ma langue maternelle.

javascript jquery css element 133794m3r
la source
3
la première personne que j'ai vue l'a eu et je ne savais pas que c'était une simple longueur de $ ('. classname'). pour l'obtenir. Si j'avais plus à donner, je le ferais. Je n'ai pas pensé à l'essayer comme ça. J'ai défini des variables un peu et des choses simples comme l'ajout de documents, etc. btw.
133794m3r du
26
+1 Pour avoir posé une question comme Yoda
jbnunn
6
@jbnunn qu'est-ce que Yoda?
shasi kanth

Réponses:

691

Devrait simplement être quelque chose comme:

// Gets the number of elements with class yourClass
var numItems = $('.yourclass').length



En remarque, il est souvent avantageux de vérifier la propriété length avant de chaîner un grand nombre d'appels de fonctions sur un objet jQuery, pour nous assurer que nous avons effectivement du travail à effectuer. Voir ci-dessous:

var $items = $('.myclass');
// Ensure we have at least one element in $items before setting up animations
// and other resource intensive tasks.
if($items.length)
{
  $items.animate(/* */)
    // It might also be appropriate to check that we have 2 or more
    // elements returned by the filter-call before animating this subset of 
    // items.
    .filter(':odd')
      .animate(/* */)
      .end()
    .promise()
    .then(function () { 
       $items.addClass('all-done');
    });
}
PatrikAkerstrand
la source
4
Je voulais juste partager que cela fonctionne aussi avec le comptage des enfants d'un élément, car c'est ce que je faisais quand j'ai atterri ici: children('div.classname').length
brs14ku
23

Compter le nombre d'éléments qui se réfèrent à la même classe est aussi simple que cela

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">

            $(document).ready(function() {
                alert( $(".red").length );
            });

        </script>
    </head>
    <body>

        <p class="red">Test</p>
        <p class="red">Test</p>
        <p class="red anotherclass">Test</p>
        <p class="red">Test</p>
        <p class="red">Test</p>
        <p class="red anotherclass">Test</p>
    </body>
</html>
Jonathan
la source
14 
var count = $('.' + myclassname).length;
Max Shawabkeh
la source
9

pour compter:

$('.yourClass').length;

devrait bien fonctionner.

le stockage dans une variable est aussi simple que:

var count = $('.yourClass').length;

Alastair Pitts
la source
2

essayer

document.getElementsByClassName('myclass').length

Afficher l'extrait de code

Kamil Kiełczewski
la source