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.

javascript jquery css element 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

Respuestas:

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

Kamil Kiełczewski
fuente