How can I count the number of elements with same class

Question

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

User · Answer

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

_x000D_

var parent = document.getElementById("parentId");_x000D_
var nodesSameClass = parent.getElementsByClassName("test");_x000D_
console.log(nodesSameClass.length);

_x000D_

<div id="parentId">_x000D_
  <p class="prueba">hello word1</p>_x000D_
  <p class="test">hello word2</p>_x000D_
  <p class="test">hello word3</p>_x000D_
  <p class="test">hello word4</p>_x000D_
</div>

_x000D_

User · Answer

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

User · Answer

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

User · Answer

maindivid   find  input  inputclass   length

User · Answer

Simplest example    x000D   x000D  document getElementById  demo   innerHTML    count      document querySelectorAll   test   length  x000D   lt html gt  x000D       lt body gt  x000D       x000D       lt p id  demo  gt  lt  p gt  x000D       lt ul gt  x000D         lt li class  test  gt Coffee lt  li gt  x000D         lt li class  test  gt Milk lt  li gt  x000D         lt li class  test  gt Soda lt  li gt  x000D       lt  ul gt  x000D   x000D    lt  body gt   x000D    lt  html gt  x000D   x000D   x000D

User · Answer

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

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

Examples related to javascript

Examples related to jquery