In this tutorial we will learn how to Count all elements with same Class in jQuery. To count all tags with same class we can use jQuery class selector and length property.
Table of Contents
jQuery Class Selector
jQuery Class Selector is a selector which selects all HTML elements with same class.
length property
length property returns the number of elements in the jQuery object.
In this example length property will count the number of elements selected by class selector.
HTML Code
HTML Code is given below, in this code we have four different elements with same class.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Count all elements with Class</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<span class="common">Span Tag</span>
<h1 class="common">H1 Tag</h1>
<a href="" class='common'>Link Tag</a>
<p class="common">Paragraph Tag</p>
<button id="btn">Count Elements</button>
<script src="script.js"></script>
</body>
</html>
JQuery Code
JQuery Code is given below, the code is executed whenever button is clicked. This is done using jQuery click() method.
$('.common') is used to select all elements with same class.
The total count is calculated with length property and then displayed using alert box.
<script>
$(document).ready(function(){
$('#btn').click(function(){
var allElements = $('.common');
var count = allElements.length;
alert(count);
});
});
</script>
Demo
Video Tutorial
Watch video tutorial on How To Count all elements with same Class with jQuery.