CODEWITHSUNDEEP
javascriptjquery
manishjangir
manishjangir

Reputation: 1695

How can I count the number of elements with same class?

I have a main div in my page with a specific id. Now some input elements of the same class are present in this div. So how can I count the number of these elements of same class in this div using jQuery?

Upvotes: 96

Views: 200218

Answers (6)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

With jQuery you can use

$('#main-div .specific-class').length

otherwise in VanillaJS (from IE8 included) you may use

document.querySelectorAll('#main-div .specific-class').length;

Upvotes: 181

simhumileco
simhumileco

Reputation: 34555

I'd like to write explicitly two methods which allow accomplishing this in pure JavaScript:

document.getElementsByClassName('realClasssName').length

Note 1: Argument of this method needs a string with the real class name, without the dot at the begin of this string.

document.querySelectorAll('.realClasssName').length

Note 2: Argument of this method needs a string with the real class name but with the dot at the begin of this string.

Note 3: This method works also with any other CSS selectors, not only with class selector. So it's more universal.

I also write one method, but using two name conventions to solve this problem using jQuery:

jQuery('.realClasssName').length

or

$('.realClasssName').length

Note 4: Here we also have to remember about the dot, before the class name, and we can also use other CSS selectors.

Upvotes: 3

Lunar Sutar
Lunar Sutar

Reputation: 21

Simplest example:

document.getElementById("demo").innerHTML = "count: " + document.querySelectorAll('.test').length;
<html>
    <body>
    
    <p id="demo"></p>
    <ul>
      <li class="test">Coffee</li>
      <li class="test">Milk</li>
      <li class="test">Soda</li>
    </ul>

 </body> 
 </html>

Upvotes: 2

Sheshank S.
Sheshank S.

Reputation: 3298

document.getElementsByClassName("classstringhere").length

The document.getElementsByClassName("classstringhere") method returns an array of all the elements with that class name, so .length gives you the amount of them.

Upvotes: 24

user7396942
user7396942

Reputation:

You can get to the parent node and then query all the nodes with the class that is being searched. then we get the size

var parent = document.getElementById("parentId");
var nodesSameClass = parent.getElementsByClassName("test");
console.log(nodesSameClass.length);
<div id="parentId">
  <p class="prueba">hello word1</p>
  <p class="test">hello word2</p>
  <p class="test">hello word3</p>
  <p class="test">hello word4</p>
</div>

Upvotes: 16

sandeep
sandeep

Reputation: 2234

$('#maindivid').find('input .inputclass').length

Upvotes: 6

Related Questions