Conteggio elementi jQuery per classe: qual è il modo migliore per implementarlo?

373

Quello che sto cercando di fare è contare tutti gli elementi nella pagina corrente con la stessa classe e poi lo userò per essere aggiunto su un nome per un modulo di input. Fondamentalmente sto permettendo agli utenti di fare clic su un <span>e quindi aggiungendone un altro per più dello stesso tipo di elementi. Ma non riesco a pensare a un modo per contare tutti questi semplicemente con jQuery / JavaScript.

Stavo per nominare l'oggetto come qualcosa del genere name="whatever(total+1)", se qualcuno ha un modo semplice per farlo, sarei estremamente grato poiché JavaScript non è esattamente la mia lingua madre.

— 133794m3r
fonte

3

la prima persona che ho visto l'ha capito e non sapevo che fosse una semplice lunghezza di $ ('. classname'). Se avessi più da dare, lo farei. Non pensavo di provarlo in quel modo. Ho impostato le variabili un po 'e cose semplici come aggiungere documenti, ecc. Ecc. Wow, mi sento piuttosto stupido ora avrei dovuto pensare di cercare il comando .length () per vedere cosa diceva ... grazie a tutti btw.

— 133794m3r,

26

+1 Per fare una domanda come Yoda

— jbnunn

6

@jbnunn cos'è Yoda?

— Shasi Kanth,

691

Dovrebbe essere qualcosa del tipo:

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

Come nota a margine, è spesso utile controllare la proprietà length prima di concatenare molte chiamate di funzioni su un oggetto jQuery, per assicurarsi che abbiamo effettivamente del lavoro da eseguire. Vedi sotto:

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
fonte

4

Volevo solo condividere che questo funziona anche con il conteggio dei figli di un elemento, poiché è quello che stavo facendo quando sono atterrato qui: children('div.classname').length

— brs14ku

23

Ottenere un conteggio del numero di elementi che si riferiscono alla stessa classe è semplice come questo

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

14

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

— Max Shawabkeh
fonte

9

per contare:

$('.yourClass').length;

dovrebbe funzionare bene.

la memorizzazione in una variabile è semplice come:

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

— Alastair Pitts
fonte

6

HTML:

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

JavaScript:

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

alert(numItems);

Demo violino per div solo interno

— Nilesh Darade
fonte

2

provare

document.getElementsByClassName('myclass').length

Mostra snippet di codice

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>

Espandi frammento

— Kamil Kiełczewski
fonte