Updated April 18, 2023
Introduction to jQuery array length
The jQuery array length property is used to sets or returns the number of elements in a given array. The array length property is a built-in property in jQuery for the array object. The jQuery size() function also returns the number of elements in the given array, but the array length property is preferred over the size() function because it avoids the overhead of calling the function.
Syntax –
The syntax of the array length property to return the length of the array –
array.length;The syntax of the array length property to set the length of the array –
array.length = value;where –
value – This is optional. It specifies the length of the array object to be set, which should be number type.
Return value –
The return value of this property is the number of elements in an array.
Working
The JQuery array length property sets or returns the length of the array. Suppose we have an array of numbers as “no = [ 51, 20, 64, 89, 45, 25 ]”, now we need to get the length of a no array. So we can use the array length property as “var len = no.length;”, where len is a variable store the return result of length property that is 6.
Examples for the jQuery array length property
Example of array length property to get the number of student names in the given array –
Example #1
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery array length property </title>
<style>
#p1 {
color : blue;
}
#p2 {
color : red;
}
</style>
</head>
<body>
<h3> This is an Example for array length property : </h3>
<button onclick = "checkRes()" > Click here to get number of students. </button>
<p id = "p1"> </p>
<p id = "p2"> </p>
<script>
var Student = [ "Smith", "Frank", "Reily", "Patel", "John" ];
function checkRes()
{
$( "#p1" ).text( "The list of Students are : " + Student );
var res = Student.length;
$( "#p2" ).text("The number of Students are : " + res);
}
</script>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code the array is created which contain names of the students. Next the array length property is used to get the number of names present in the student array as “Student.length;”, the length property return the number 5 that is the length of Student array, as we can see in the above output.
Example of array length property to set the number of fruits names for the given array –
Example #2
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery array length property </title>
<style>
#p1 {
color : blue;
}
#p2 {
color : red;
}
#p3 {
color : green;
}
</style>
</head>
<body>
<h3> This is an Example for array length property : </h3>
<p id = "p1"> </p>
<button onclick = "checkRes()" > Click here to set number of fruits. </button>
<p id = "p2"> </p>
<p id = "p3"> </p>
<p id = "p4"> </p>
<script>
var fruits = [ "Banana", "Blackberry", "Apple", "Orange", "Banana", "Cherry", "Plums" ];
$( "#p1" ).text( "The list of fruits are : " + fruits);
function checkRes()
{
$( "#p2" ).text( "The number of fruits before set the length property is : " + fruits.length );
fruits.length = 5;
$( "#p3" ).text( "The number of fruits before set the length property is : " + fruits.length);
$( "#p4" ).text( "Now, the list of fruits are : " + fruits);
}
</script>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, the array is created which contain names of the fruits. Next the array length property is used to set the number of names present in the fruits array as “fruits.length = 5;”, the length property set the length 5 and remove the remaining elements, as we can see in the above output.
Example of array length property to iterate all the elements of the given array –
Example #3
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery array length property </title>
<style>
#p1 {
color : blue;
}
</style>
</head>
<body>
<h3> The Example for array length property : </h3>
<p id = "p1" > </p>
<button onclick = "checkRes()" style = "background-color : green" > Click here to get all subjects. </button>
<script>
var arr = new Array( "JavaScript", "CSS", "Java", "jQuery");
$( "#p1" ).text( "The list of subjects are : " + arr);
function checkRes()
{
for ( i = 0; i < arr.length; i++ )
{
document.write( arr[i] + "<br>" );
}
}
</script>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, the array is created which contains the names of the subjects. Next, the array length property is used to get the number of elements present in the subject array to iterate one by one array element till the length of the array, as we can see in the above output.
Conclusion
The jQuery array length property is a predefined property, which is used to sets or gets the number of elements in a given array.
Recommended Articles
This is a guide to jQuery array length. Here we discuss the Working of the JQuery array length property along with the examples and outputs. You may also have a look at the following articles to learn more –
