Updated March 31, 2023
Introduction to jQuery length
jQuery length property is used to get the number of elements in the jQuery object. It is a built-in property. The length property performs the same task as the size() method does and also avoids the overhead of calling the function. Sometimes we need to know the number of times an element present in an object, so for this purpose jQuery provide the length property.
Syntax of jQuery length property:
$(selector).length;Parameters:
- selector: This is not an optional parameter, that specifies the object whose length is to find.
Return Value:
The return value of this property is the length of an object or selector.
Working of jQuery length Property
- The length property is used on the selector to get the length of the particular selector.
- The selector can be element, id, or class.
- When the length property used on the element the length property calculates how many times the element is present in the document or jQuery object and returns its occurrences as a result.
Examples
Given below are the examples mentioned:
Example #1
Example of property for finding the number of counts of the element.
Next, we write the html code to see more clearly with the following example, where the length property is used to find the number of counts of the p element.
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery length property </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<script>
$(document).ready(function() {
$("button").click(function() {
document.getElementById("disp").innerHTML = "<br>" + $("p").length
});
});
</script>
</head>
<body>
<p style = "color:blue"> This is the first paragraph </p>
<p style = "color:blue"> This is the second paragraph </p>
<p style = "color:blue"> This is the third paragraph </p>
<p style = "color:blue"> This is the fourth paragraph </p>
<button>Click This button to get the number of "p" elements</button>
<div id="disp" style = "color:red"></div>
</body>
</html>Output:
Once we click on the “Click This button to get the number of “p” elements” button the output is –
As in the above program the code “$(“p”).length;” find and return the number of times the p element is present in the document and which is displaying, as we can see in the output.
Example #2
Example of jQuery length property for finding the number of counts of the element if it is nested in other elements.
Next, we write the html code to see the jQuery length property, where the length property is used to finding the number of counts of p element which is nested in div and span elements.
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery length property </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<script>
$(document).ready(function() {
$("button").click(function() {
document.getElementById("noofp").innerHTML = "<br>" + $("p").length
});
});
$(document).ready(function() {
$("button").click(function() {
document.getElementById("noofdiv").innerHTML = "<br>" + $("div").length
});
});
</script>
</head>
<body>
<div>
<p style = "color:blue"> This is the first paragraph </p>
<p style = "color:blue"> This is the second paragraph </p>
</div>
<span>
<p style = "color:blue"> This is the third paragraph </p>
<p style = "color:blue"> This is the fourth paragraph </p>
</span>
<button>Click this button to get the number of "p" and div elements</button>
<div id="noofp" style = "color:red"> </div>
<div id="noofdiv" style = "color:red"> </div>
</body>
</html>Output:
Once we click on the “Click this button to get the number of “p” and div elements” button, the output is:
As in the above program the two elements length is finding, for the p and div elements. The p element is present four times in the document, the first two times it is inside the div element and the next two times it is inside the span element, so but the length property is giving the correct result four times. The div element is also present 3 times which is also giving the correct result by the length property as we can see in the output.
Example #3
Example of jQuery length property for finding the length for different selectors.
Next, we write the html code to see the jQuery length property, where the length property is used to finding the number of times the different types of selectors are present.
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery length property </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<script>
$(document).ready(function() {
$( document.body ).append( $( "<div>" ) );
var n1 = $( "p" ).length;
var n2 = $("#id1" ).length;
var n3 = $(".test" ).length;
$( "span" ).text( "There are " + n1 + " number of element selectors. There are " + n2 + " number of id selectors. There are " + n3 + " number of class selectors");
});
</script>
</head>
<body>
<p style = "color:blue"> This is for element selector </p>
<p style = "color:blue"> This is for element selector </p>
<h2 id = "id1" style = "color:red">This is for id selector </h2>
<h2 class = "test" style = "color:orange"> This is for class selector </h2>
<h2 class = "test" style = "color:orange"> This is for class selector </h2>
<span></span>
<div></div>
</body>
</html>Output:
As in the above program, it is showing how to find length of the different types of selectors like on the element, id, and class by using the length property. So to use length property on an element the above code used as $( “p” ).length, to use on id used as $( “#id” ).length and use on class used as $( “.class” ).length.
Conclusion
The jQuery length property is a built-in property, which is used to get the number of elements present in the jQuery object.
Recommended Articles
This is a guide to jQuery length. Here we discuss the introduction, working of jQuery length property along with examples respectively. You may also have a look at the following articles to learn more –
