jQuery count number of divs with a certain class

Question

Considering something like this    lt div class  wrapper  gt       lt div class  item  gt  lt  div gt       lt div class  item  gt  lt  div gt       lt div class  item  gt  lt  div gt       lt div class  item  gt  lt  div gt       lt div class  item  gt  lt  div gt   lt  div gt    How would I  using jQuery  or plain JS  if it s shorter - but I doubt it  count the number of divs with the  item  class  In this example  the function should return 5  as there are 5 divs with the item class   Thanks

User · Answer

For better performance you should use   var numItems      div item   length    Since it will only look for the div elements in DOM and will be quick   Suggestion  using size   instead of length property means one extra step in the processing since SIZE   uses length property in the function definition and returns the result

User · Answer

You can use the jquery  length property  var numItems       item   length

User · Answer

lt  DOCTYPE html gt       lt html gt       lt head gt           lt title gt  lt  title gt           lt style type  text css  gt               test                   background   ff4040                  color   fff                  display  block                  font-size  15px                         lt  style gt       lt  head gt       lt body gt           lt div class  test  gt  one  lt  div gt           lt div class  test  gt  two  lt  div gt           lt div class  test  gt  three  lt  div gt           lt div class  test  gt  four  lt  div gt           lt div class  test  gt  five  lt  div gt           lt div class  test  gt  six  lt  div gt           lt div class  test  gt  seven  lt  div gt           lt div class  test  gt  eight  lt  div gt           lt div class  test  gt  nine  lt  div gt           lt div class  test  gt  ten  lt  div gt           lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt           lt script type  text javascript  gt            document  ready function                    get total length by class             var numItems       test   length                get last three count             var numItems3 numItems-3                         var i   0                  test   each function                    i                    if i gt numItems3                                           this  attr  class                                                         lt  script gt       lt  body gt       lt  html gt

User · Answer

I just created this js function using the jQuery size function http   api jquery com size   function classCount name     alert       name  size        It alerts out the number of times the class name occurs in the document

User · Answer

You can use jQuery children property   var numItems       wrapper   children  div   length    for more information refer http   api jquery com

User · Answer

And for the plain js answer if anyone might be interested   var count   document getElementsByClassName  item      Cheers   Reference  https   www w3schools com jsref met document getelementsbyclassname asp

[jquery] jQuery count number of divs with a certain class?

Examples related to jquery

Examples related to html

Examples related to count