jQuery count number of divs with a certain class?

Jquery Problem Overview

Considering something like this;

<div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

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!

Jquery Solutions

Solution 1 - Jquery

You can use the jquery .length property

var numItems = $('.item').length;

Solution 2 - Jquery

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.

Solution 3 - Jquery

You can use jQuery.children property.

var numItems = $('.wrapper').children('div').length;

for more information refer http://api.jquery.com/

Solution 4 - Jquery

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

Solution 5 - Jquery

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.

Solution 6 - Jquery

can count child divs like this

let number_of_child_divs =  $('.wrapper').children('.item').length;

outout : 5

Solution 7 - Jquery

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
            .test {
                background: #ff4040;
                color: #fff;
                display: block;
                font-size: 15px;
            }
        </style>
    </head>
    <body>
        <div class="test"> one </div>
        <div class="test"> two </div>
        <div class="test"> three </div>
        <div class="test"> four </div>
        <div class="test"> five </div>
        <div class="test"> six </div>
        <div class="test"> seven </div>
        <div class="test"> eight </div>
        <div class="test"> nine </div>
        <div class="test"> ten </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
        $(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>numItems3)
                {

                    $(this).attr("class","");
                }
            })
        });
    </script>
    </body>
    </html>

Content Type	Original Author	Original Content on Stackoverflow
Question	user825286	View Question on Stackoverflow
Solution 1 - Jquery	Brian Glaz	View Answer on Stackoverflow
Solution 2 - Jquery	Ghazanfar Mir	View Answer on Stackoverflow
Solution 3 - Jquery	Nikhil salwe	View Answer on Stackoverflow
Solution 4 - Jquery	Pax Vobiscum	View Answer on Stackoverflow
Solution 5 - Jquery	Vlad	View Answer on Stackoverflow
Solution 6 - Jquery	user889030	View Answer on Stackoverflow
Solution 7 - Jquery	Pratik Shah	View Answer on Stackoverflow