jQuery cuenta elementos por clase; ¿Cuál es la mejor manera de implementar esto?

284

Lo que trato de hacer es contar todos los elementos en la página actual con la misma clase y luego voy a usarlos para agregarlos a un nombre para un formulario de entrada. Básicamente, les permito a los usuarios hacer clic en <span> y luego, al hacerlo, agregar otro para más del mismo tipo de elementos. Pero no puedo pensar en una forma de contar todo esto simplemente con jQuery/JavaScript.jQuery cuenta elementos por clase; ¿Cuál es la mejor manera de implementar esto?

Iba a nombrar el artículo como algo así como name="whatever(total+1)", si alguien tiene una forma sencilla de hacerlo, estaría muy agradecido ya que JavaScript no es exactamente mi lengua materna.

Fuente

2010-04-28 133794m3r

la primera persona que vi conseguí y yo no sabía que era una sencilla $ ('nombreclase'). Longitud para conseguirlo. Si tuviera más para dar lo haría. No pensé en probarlo así. He estado configurando variables bastante y cosas simples como anexar documentos, etc. Guau, me siento muy tonto ahora debería haber pensado en buscar el comando .length() para ver qué decía ... gracias para todos por cierto. – 133794m3r

+15

+1 Por hacer una pregunta como Yoda – jbnunn

@jbnunn ¿qué es Yoda? –

520

sólo debe ser algo como:

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

Como nota lateral, a menudo es beneficioso para comprobar la propiedad de longitud antes de encadenar un montón de funciones hace un llamamiento a un objeto jQuery, para asegurarnos de que realmente tenemos algo de trabajo que realizar. Ver más 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'); 
    }); 
}

Fuente

2010-04-28 06:45:14 PatrikAkerstrand

Solo quería compartir que esto también funciona con el conteo de elementos de un elemento, ya que eso es lo que estaba haciendo cuando llegué aquí: 'children ('div.classname'). Length' – brs14ku

Seguramente no es una buena solución pero perfecta para OP. –

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

Fuente

2010-04-28 06:45:29

para el conteo:

$('.yourClass').length;

debería funcionar bien.

almacenar en una variable es tan fácil como:

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

Fuente

2010-04-28 06:47:29

Conseguir un recuento del número de elementos que hacen referencia 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>

Fuente

2010-04-28 06:50:01 Jonathan

HTML:

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

JavaScript:

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

alert(numItems);

Fiddle demo for inside only div

Fuente

2014-08-22 06:42:22

jQuery cuenta elementos por clase; ¿Cuál es la mejor manera de implementar esto?

Respuesta

Cuestiones relacionadas