web-dev-qa-db-fra.com

jQuery compter les éléments par classe - quelle est la meilleure façon de mettre en œuvre cela?

Ce que j'essaie de faire est de compter tous les éléments de la page en cours avec la même classe, puis de l'utiliser pour l'ajouter à un nom pour un formulaire de saisie. En gros, j'autorise les utilisateurs à cliquer sur un <span> puis à en ajouter un autre pour plusieurs types 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 suit: name="whatever(total+1)", si quelqu'un dispose d'un moyen simple de le faire, je lui en serai extrêmement reconnaissant, car JavaScript n'est pas exactement ma langue maternelle.

javascriptjquerycsselement
351
133794m3r

Devrait juste être quelque chose comme:

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



En remarque, il est souvent utile de vérifier la propriété length avant de chaîner de nombreux appels de fonctions sur un objet jQuery, afin de nous assurer que nous avons 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');
    });
}
647
PatrikAkerstrand

Compter le nombre d'éléments qui font référence à 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>
23
Jonathan
var count = $('.' + myclassname).length;
13
Max Shawabkeh

pour compter:

$('.yourClass').length;

devrait bien fonctionner.

stocker dans une variable est aussi simple que:

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

8
Alastair Pitts

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 Fiddle pour div seulement à l'intérieur

6
Nilesh Darade

essayer

document.getElementsByClassName('myclass').length

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>
0
Kamil Kiełczewski