9

Quisiera saber como puedo contar los elementos que hay con una misma clase en un HTML a poder ser con JQuery sino con JavaScript también me vale.

Gracias!

Ejemplo

div class="hola"
div class="hola"
div class="hola"

Un script que dijese que hay 3 elementos con la clase "hola".

¿Que he probado?

var divs = document.getElementsByClassName("orange"); 
var numDivs = divs.length; 
var contadorNaranja = 0; 
for(var i = 0; i < numDivs; i++){
  if(divs[i].className == "orange") 
  contadorNaranja++;
}
var puntos1 = contadorNaranja;

document.getElementById("jugador1puntos").innerHTML = "Jugador1: "+puntos1;
7
  • 4
    Sería ideal que añadieses lo que hayas intentado y los problemas/dificultades que te estés encontrando. Lee Cómo preguntar y cómo crear un ejemplo mínimo verificable para más información y recomendaciones.
    – Alvaro Montoro
    Commented el 17 abr. 2018 a las 13:56
  • ¿Qué has intentado? Hay varias formas de hacer esto, pero sería bueno siempre que muestres el intento que has hecho. Saludos.
    – A. Cedano
    Commented el 17 abr. 2018 a las 14:06
  • Ese codigo qué problemas te da? Y por qué en vez de ByTagName no usas ByClassName?
    – lois6b
    Commented el 17 abr. 2018 a las 14:13
  • De pronto el condicional que haces no funcione, ya que className puede no ser igual a orange, mejor pregunta if (divs[i].classList.contains('orange')) esto funcionará mas, pero dado tu código no tiene sentido aumentar el contador naranja, ya que si obtuviste n cantidad de divs al hacer el getElementByClassName entonces ese length viene siendo el valor final de la variable contadorNaranja, es decir, no es necesario hacer el for Commented el 17 abr. 2018 a las 14:20
  • 1
    @rafemo las dos opciones que dices que intentaste funcionan sin problemas y sin ningún tipo de cambio (JSFiddle). ¿cuál es el problema que te encontrabas con esas dos soluciones?
    – Alvaro Montoro
    Commented el 17 abr. 2018 a las 14:30

4 respuestas 4

19

Con javascript

Puedes utilizar la propiedad getElementsByClassName() e imprimir su length

var divs = document.getElementsByClassName("hola").length;
console.log("Hay " + divs + " elementos");
<div class="hola"></div>
<div class="hola"></div>
<div class="hola"></div>
<div class="hola"></div>
<div class="hola"></div>
<div class="hola"></div>

Con jQuery

Puedes utilizar la propiedad toArray() que convierte en un arreglo el resultado para su manipulación y puedes imprimir su length para saber cuantos elementos tiene.

var $divs = $(".hola").toArray().length;
console.log("Hay " + $divs + " elementos");
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="hola"></div>
<div class="hola"></div>
<div class="hola"></div>
<div class="hola"></div>
<div class="hola"></div>

Si por otro lado lo único que necesitas es saber cuantos elementos existen, se puede utilizar $(".hola").length

2
  • Una pregunta: ¿Por qué usar toArray()? No veo diferencia a usarlo o no en este caso
    – user7176
    Commented el 17 abr. 2018 a las 14:53
  • @blonfu vi que estaba trabajando con un bucle, pensé que le serviría mas para iterarlo. Pero tienes razón en este caso no hay diferencia
    – user22721
    Commented el 17 abr. 2018 a las 14:55
10

La propiedad length te regresará la cantidad de elementos con esa clase

$(".hola").length

Espero haber ayudado

Saludos

0
7

Lo que quieres hacer es muy fácil. Y se puede hacer perfectamente con JS puro. Usar jQuery para esto sería a mi juicio una involución. Lo que quiero decir es que el código funciona mejor y más rápido con JS puro que con jQuery.

En JS puro hay al menos dos formas de hacerlo:

  • con getElementsByClassName usándolo adecuadamente
  • con querySelectoAll (sería la forma más óptima, sólo que la comptabilidad es de un 90%... tampoco está mal).

Te dejo un ejemplo con las dos posibilidades:

/*Forma 1: con getElementsByClassName*/
var divsOrange = document.getElementsByClassName("orange");
var totalNaranja = divsOrange.length;

document.getElementById("jugador1puntos").innerHTML = "Jugador1: " + totalNaranja;

/*Forma 2: con querySelectorAll*/

var divsRojo = document.querySelectorAll(".red");
var totalRojo = divsRojo.length;

document.getElementById("jugador2puntos").innerHTML = "Jugador2: " + totalRojo;
<div class="orange"></div>
<div class="red"></div>
<div class="orange"></div>
<div class="blue"></div>
<div class="orange"></div>
<div class="red"></div>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>

<hr />
<div id="jugador1puntos"></div>
<div id="jugador2puntos"></div>

NOTA: Escribí esta respuesta al ver que el código de tu pregunta estaba originalmente en JS puro, con la intención de hacer ver que esto es posible muy fácilmente sin tener que recurrir a librerías externas.

-5
$('.hola').size();

Bastante intuitivo, no crees?

1
  • 6
    size() está desaprobado desde jQuery 1.8.
    – user7176
    Commented el 17 abr. 2018 a las 14:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.