Elementos de conteo de jQuery por clase: ¿cuál es la mejor manera de implementar esto?

373

Lo que intento hacer es contar todos los elementos en la página actual con la misma clase y luego lo usaré para agregarlo a un nombre para un formulario de entrada. Básicamente, estoy permitiendo que los usuarios <span>hagan clic en ay luego, agregando otro para obtener más del mismo tipo de elementos. Pero no puedo pensar en una forma de contar todo esto simplemente con jQuery / JavaScript.

Entonces iba a nombrar el elemento como algo así name="whatever(total+1)", si alguien tiene una manera simple de hacer esto, estaría extremadamente agradecido ya que JavaScript no es exactamente mi lengua materna.

— 133794m3r
fuente

3

la primera persona que vi lo consiguió y no sabía que era un simple $ ('. classname'). length para obtenerlo. Si tuviera más que dar, lo haría. No pensé en intentarlo así. He estado configurando variables bastante y cosas simples como anexar documentos, etc. por cierto.

— 133794m3r

26

+1 Por hacer una pregunta como Yoda

— jbnunn

66

@jbnunn ¿Qué es Yoda?

— shasi kanth

691

Debería ser algo así como:

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

Como nota al margen, a menudo es beneficioso verificar la propiedad de longitud antes de encadenar muchas llamadas de funciones en un objeto jQuery, para garantizar que realmente tengamos algo de trabajo que realizar. Vea abajo:

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
fuente

44

Sólo quería compartir que esto también trabaja con niños de conteo de un elemento, ya que eso es lo que estaba haciendo cuando aterricé aquí: children('div.classname').length

— brs14ku

23

Obtener un recuento del número de elementos que se refieren a la misma clase es tan simple como esto

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

14

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

— Max Shawabkeh
fuente

9

para contar:

$('.yourClass').length;

Debería funcionar bien.

almacenar en una variable es tan fácil como:

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

— Alastair Pitts
fuente

6

HTML:

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

JavaScript:

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

alert(numItems);

Demostración de violín solo para div

— Nilesh Darade
fuente

2

tratar

document.getElementsByClassName('myclass').length

Mostrar fragmento de código

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>

Expandir fragmento

— Kamil Kiełczewski
fuente