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!
<!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>
You can use jQuery.children property.
var numItems = $('.wrapper').children('div').length;
for more information refer http://api.jquery.com/
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
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.
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.
Source: Stackoverflow.com