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.
This question is related to
javascript
jquery
css
element
try
document.getElementsByClassName('myclass').length
let num = document.getElementsByClassName('myclass').length;_x000D_
console.log('Total "myclass" elements: '+num);.myclass { color: red }<span class="myclass" >1</span>_x000D_
<span>2</span>_x000D_
<span class="myclass">3</span>_x000D_
<span class="myclass">4</span>HTML:
<div>
<img src='' class='class' />
<img src='' class='class' />
<img src='' class='class' />
</div>
JavaScript:
var numItems = $('.class').length;
alert(numItems);
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>
for counting:
$('.yourClass').length;
should work fine.
storing in a variable is as easy as:
var count = $('.yourClass').length;
var count = $('.' + myclassname).length;
Source: Stackoverflow.com