Count how many elements with the same class are with JQuery


I would like to know how I can count the elements that exist with the same class in an HTML to be able to be with JQuery but with JavaScript also OK.

Thank you!


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

A script that says there are 3 elements with the class "hello".

What have I tried?

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

document.getElementById("jugador1puntos").innerHTML = "Jugador1: "+puntos1;
asked by rafemo 17.04.2018 в 15:54

4 answers


With javascript

You can use the property getElementsByClassName() and print its 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>

With jQuery

You can use the toArray() property, which converts the result for manipulation into an array and you can print its length to know how many elements you have.

var $divs = $(".hola").toArray().length;
console.log("Hay " + $divs + " elementos");
<script src=""></script>
<div class="hola"></div>
<div class="hola"></div>
<div class="hola"></div>
<div class="hola"></div>
<div class="hola"></div>

If on the other hand the only thing you need is to know how many elements exist, you can use $(".hola").length

answered by 17.04.2018 / 16:02

The length property will return the number of elements with that class


I hope I have helped


answered by 17.04.2018 в 16:03

What you want to do is very easy. And it can be done perfectly with pure JS. Using jQuery for this would be in my opinion an involution . What I mean is that the code works better and faster with pure JS than with jQuery.

In pure JS there are at least two ways to do it:

  • with getElementsByClassName using it properly
  • with querySelectoAll (it would be the most optimal way, only that the comptability is 90% ... it's not bad either).

Here is an example with the two possibilities:

/*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>

NOTE : I wrote this response when I saw that the code for your question was originally in pure JS, with the intention of making sure that   this is possible very easily without having to resort to bookstores   external.

answered by 17.04.2018 в 16:24

Quite intuitive, do not you think?

answered by 17.04.2018 в 16:00