Count how many elements with the same class are with JQuery

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="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>

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

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

$(".hola").length

I hope I have helped

Greetings

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.

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

Quite intuitive, do not you think?