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 · Accepted 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

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

maindivid   find  input  inputclass   length

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   x000D  var parent   document getElementById  parentId    x000D  var nodesSameClass   parent getElementsByClassName  test    x000D  console log nodesSameClass length   x000D   lt div id  parentId  gt  x000D     lt p class  prueba  gt hello word1 lt  p gt  x000D     lt p class  test  gt hello word2 lt  p gt  x000D     lt p class  test  gt hello word3 lt  p gt  x000D     lt p class  test  gt hello word4 lt  p gt  x000D   lt  div gt  x000D   x000D   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

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

Examples related to javascript

Examples related to jquery