Updated April 1, 2023
Introduction to jQuery each function
The jQuery each function is used to run the specified function for each matched element iterate over a jQuery object. The each() function is a built-in function in jQuery. Each () function performs on an array, selector, and object, and we no need to know how many elements are available it works literately, continuously with all the elements until it gets an element that makes it differ from other iterative functions. Sometimes we need to run the same function for each element of an array, so for this purpose it provides the each() function.
The syntax of the each() function –
$(selector).each(function(index, element));Parameters –
- selector – This is not an optional parameter, that specifies the object for whose elements the specified function is to be run iteratively.
- function – This is not an optional parameter, that specifies the name of the function which is to be run for each matched element.
- index – This is an optional parameter, that specifies an index position of the element.
- element – This is an optional parameter, that specifies the current element.
Working of jQuery each() function
The jQuery each() function uses on an array, selector, or object to run the specified function for each element iteratively. The selector can also be an element, id, or class. The each() function accepts two parameter array-like objects and functions with index position and element at that index or value. For example, we pass an array and function to the each() function, the each() function starts to iterate each element of an array from an index 0 as same as the for loop in any other language and retrieve both index positions and current element and run function.
Examples for the jQuery each() function
Example of jQuery each() function for iterating an array element –
Next, we write the html code to understand the each() function more clearly with the following example, where the each() function is used to iterate an array element, as below –
Example #1
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery each function </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function() {
var fruits = [ "Apple", "Banana", "Orange", "Mango", "Cherry" ];
$( fruits ).each( function (index, element) {
alert( "Position is : "+ index + " And Element is : " + element);
});
});
});
</script>
</head>
<body>
<button>Click this button to iterate all the elements of an array.</button>
</body>
</html>Output:
Once we click on the “Click this button to iterate all the elements of an array.” button the output is –
And once we click the “ok” button, the output is –
And it will continue until all five elements are not printed.
As in the above program an array is created which contain five elements and later the each() function is called on that array with function and its parameter index and element, the each() function start iterating over all that array elements, and one by one all elements are printing as an output by the alert() method, as we can see in the output.
Example of each() function for iterating the selector elements –
Next, we write the html code to understand the each() function, where the each() function is used to iterate all the “li” selector elements, as below –
Example #2
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery each function </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function() {
$( "li" ).each( function (index, element) {
alert( "Position is : "+ index + " And Element is : " + $(this).text());
});
});
});
</script>
</head>
<body>
<h3>The list of fruits are:</h3>
<ul>
<li> Apple </li>
<li> Banana </li>
<li> Orange </li>
<li> Mango </li>
<li> Cherry </li>
</ul>
<button>Click this button to iterate all the elements of an "li" selector.</button>
</body>
</html>Output:
Once we click on the “Click this button to iterate all the elements of a “li” selector” button, the output is –
And once we click the “ok” button, the output is –
And it will continue until all five elements are not printed.
As in the above program “li” elements are created which are five elements and later the each() function is called on the “li” selector element with function and its parameter index and element as “$( “li” ).each( function (index, element)”, the each() function start iterating over all the elements and one by one all elements are printing as an output by the alert() method, as we can see in the output.
Example of jQuery each() function for iterating object properties –
Next, we write the html code to understand the jQuery each() function, where the each() function is used to iterate object properties in the key-value pair, as below –
Example #3
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery each function </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function() {
$.each({ 1:'Apple', 2:'Banana', 3:'Orange', 4:'Mango', 5:'Cherry' }, function( k, v ) {
alert( "Key: " + k + ", Value: " + v );
});
});
});
</script>
</head>
<body>
<button>Click this button to iterate all the properties of an object.</button>
</body>
</html>Output:
Click this button to iterate all the properties of an object.
And once we click the “ok” button, the output is –
And it will continue until all five elements are not printed.
As in the above program, an object is created which contain five elements, and later the each() function is called on that object with function and its parameter key and value as $.each({ 1:’Apple’, 2:’Banana’, 3:’Orange’, 4:’Mango’, 5:’Cherry’ }, function( k, v )”, the each() function start iterating over all the elements and one by one all key-value pairs are printing as an output by the alert() method, as we can see in the output.
Conclusion
The jQuery each function is a built-in function in jQuery, which is used to execute the specified function for each matched element iteratively over a jQuery object.
Recommended Articles
This is a guide to jQuery each function. Here we discuss the Working of the jQuery each() function and Examples along with the codes and outputs. You may also have a look at the following articles to learn more –
