jQuery count number of divs with a certain class?
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 f开发者_如何学Gounction should return 5, as there are 5 divs with the item class.
Thanks!
You can use the jquery .length property
var numItems = $('.item').length;
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.
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
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.
<!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>
can count child divs like this
let number_of_child_divs = $('.wrapper').children('.item').length;
outout : 5
I was looking to count for table tr elements but in my case I was needed count should be updated in real time. Here is my solution to get tr count real time.
Jquery:
$(document).ready(function() {
// Get initial number of rows
var rowCount = $('#myTable tr').length;
$('#rowCount').text(`Total rows: ${rowCount}`);
// Handle rows being added
$('#myTable').on('DOMNodeInserted', function() {
rowCount = $('#myTable tr').length;
$('#rowCount').text(`Total rows: ${rowCount}`);
});
// Handle rows being removed
$('#myTable').on('DOMNodeRemoved', function() {
rowCount = $('#myTable tr').length;
$('#rowCount').text(`Total rows: ${rowCount}`);
});
});
This code listens for the DOMNodeInserted and DOMNodeRemoved events on the #myTable element. When those events fire (i.e. when rows are added or removed), the code updates the rowCount variable and displays the updated count in the #rowCount element.
加载中,请稍侯......
精彩评论