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.

— 133794m3r
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

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

14

var count = $('.' + myclassname).length;

— Max Shawabkeh
source

9

pour compter:

$('.yourClass').length;

devrait bien fonctionner.

le stockage dans une variable est aussi simple que:

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

— Alastair Pitts
source

6

HTML:

<div>
    <img src='' class='class' />
    <img src='' class='class' />
    <img src='' class='class' />
</div>

JavaScript:

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

alert(numItems);

Démo de violon pour div à l'intérieur seulement

— Nilesh Darade
source

2

essayer

document.getElementsByClassName('myclass').length

Afficher l'extrait de code

let num = document.getElementsByClassName('myclass').length;
console.log('Total "myclass" elements: '+num);

.myclass { color: red }

<span class="myclass" >1</span>
<span>2</span>
<span class="myclass">3</span>
<span class="myclass">4</span>

Développer l'extrait

— Kamil Kiełczewski
source