jQuery counting elements by class - what is the best way to implement this?
Question
What I'm trying to do is to count all of the elements in the current page with the same class and then I'm going to use it to be added onto a name for an input form. Basically I'm allowing users to click on a <span> and then by doing so add another one for more of the same type of items. But I can't think of a way to count all of these simply with jQuery/JavaScript.
I was going to then name the item as something like name="whatever(total+1)" , if anyone has a simple way to do this I'd be extremely grateful as JavaScript isn't exactly my native tongue.
6 answers
solution1
651 ACCPTED 2010-04-28 06:45:14
Should just be something like:
// Gets the number of elements with class yourClass
var numItems = $('.yourclass').length
As a side-note, it is often beneficial to check the length property before chaining a lot of functions calls on a jQuery object, to ensure that we actually have some work to perform. See below:
var $items = $('.myclass');
// Ensure we have at least one element in $items before setting up animations
// and other resource intensive tasks.
if($items.length)
{
$items.animate(/* */)
// It might also be appropriate to check that we have 2 or more
// elements returned by the filter-call before animating this subset of
// items.
.filter(':odd')
.animate(/* */)
.end()
.promise()
.then(function () {
$items.addClass('all-done');
});
}
solution2
23 2010-04-28 06:50:01
Getting a count of the number of elements that refer to the same class is as simple as this
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert( $(".red").length );
});
</script>
</head>
<body>
<p class="red">Test</p>
<p class="red">Test</p>
<p class="red anotherclass">Test</p>
<p class="red">Test</p>
<p class="red">Test</p>
<p class="red anotherclass">Test</p>
</body>
</html>
solution3
13 2010-04-28 06:45:29
var count = $('.' + myclassname).length;
solution4
8 2010-04-28 06:47:29
for counting:
$('.yourClass').length;
should work fine.
storing in a variable is as easy as:
var count = $('.yourClass').length;
solution5
6 2014-08-22 06:42:22
HTML:
<div>
<img src='' class='class' />
<img src='' class='class' />
<img src='' class='class' />
</div>
JavaScript:
var numItems = $('.class').length;
alert(numItems);
solution6
0 2019-04-25 13:27:08
try
document.getElementsByClassName('myclass').length
let num = document.getElementsByClassName('myclass').length; console.log('Total "myclass" elements: '+num);
.myclass { color: red }
<span class="myclass" >1</span> <span>2</span> <span class="myclass">3</span> <span class="myclass">4</span>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.