Updated April 10, 2023
Introduction to jQuery array iteration
The jquery array iteration is the process used for continuously operating a similar type of data and the user gets the output. The array iteration is the function working for repeating the operation or process to get the required result. The array iteration is the looping process to operate the sequence of the same type of data. The array iteration is working for repetition and a similar process of coding for array lists or sets of data. The jquery array iteration is the method to iterate the same code for the required number of the time. The array iteration is using to reduce the programming algorithm length and handle the array list.
Syntax
Using “for” loop syntax is below.
var array_var = [ elements of the array… ];
for( condition of the array element … ) {
coding for jquery array iteration…
}- The “for loop” is the function used for the basic iteration of the jquery array.
The array iteration using the “for – in” loop syntax is below.
var array_var = [ elements of the array… ];
for(var data in array_var) {
coding and for jquery array iteration using array_var[data]…
}- The “for – in” loop is the function used for simple and easy iteration of the jquery array.
- The “for – in” loop does not need the condition to iterate and operate the array element.
The array iteration using “each” method syntax is below.
$.each(jquery array object, jquery callback function);- The “$” sign is representing to define the jquery and access the Jquery.
- The “each()” method is representing to operate the jquery array iterating in the loop format.
- The “jquery array” is represented to show the array values or array objects inside of each() method.
- The “jquery callback function” is using for the array index and array value inside of each() method.
The array iteration using the “map” method syntax is below.
$.map(jquery array or object, jquery callback function);- The “map()” method is using to operate array iteration.
- The “jquery array” is represented to display the array values or array objects inside of the map() method.
- The “jquery callback function” is using for the array index and array value inside of the map() method.
How to perform array iteration in jquery?
To jquery scroll left user either download the jquery library or use jquery CDN version link.
- Download the development version or product version of jquery from jquery.com.
- The jquery latest version place inside of the html page. The jquery link is below.
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>The HTML page is created with filename and .html extension.
- Example: jqueryarrayloop.html
The <script> tag is placing inside of the body section on the HTML page.
- <script> write a jquery array iteration code here… </script>
The array iteration syntax is using in the source code.
- Create a variable for array iteration operation.
var jq_Addition = 0;- Create a jquery array variable by initializing the array value.
var array_var = [ 9, 5, 3, 7, 8 ];- The “for – in” loop is useful for array iteration.
for(var data in array_var){write required source code for iteration…}- Write the source code of the addition for the iteration.
Jq_Addition += array_var[ data ];- Return the required output.
document.write("jquery array iteration for Addition: " +jq_Addition);Combine the procedure of the array iteration.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var jq_Addition = 0;
var array_itr = [2, 5, 6, 3, 8, 9];
for(var data in array_itr){
jq_Addition += array_itr[ data ];
}
document.write("jquery array iteration for Addition: " +jq_Addition);
});
</script>
</head>
<body>
</body>
</html>Examples
Here are the following examples mentioned below
Example #1
Using the “for” loop example and output is below.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var jq_Addition = 0;
var array_itr = [2, 5, 6, 3, 8, 9];
for ( var i = 0, l = array_itr.length; i < l; i++ ) {
jq_Addition += array_itr[ i ];
}
document.write("jquery array iteration for Addition: " +jq_Addition);
});
</script>
</head>
<body>
</body>
</html>Output:
Example #2
The array iteration using the “for – in” loop example and output is below.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var jq_Addition = 0;
var array_itr = [2, 5, 6, 3, 8, 9];
for ( var data in array_itr ) {
jq_Addition += array_itr[ data ];
}
document.write("jquery array iteration for Addition: " +jq_Addition);
});
</script>
</head>
<body>
</body>
</html>Output:
Example #3
The array iteration using “each” method example and output is below.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
document.write( "Jquery array loop example! <br/>" );
$.each ( [21, 56, 61, 88, 72], function( ind, valu ) {
document.write( ind + ": " + valu+ "<br/>" );
});
</script>
</head>
<body>
</body>
</html>Output:
Example #4
The array iteration using the “map” method example and output is below.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<span id="write"></span>
<script>
var itr_var = document.getElementById('write');
var jq_itr_arr = [2, 5, 6, 3, 8, 9];
var jqry_Arr = $.map(jq_itr_arr, function(vals, inde) {
return {
Addition: (vals-1) + vals
};
})
itr_var.innerHTML = JSON.stringify(jqry_Arr);
</script>
</body>
</html>Output:
Example #5
The jquery string array iteration using the “for – in” loop example and output is below.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var jq_Addition = "";
var array_itr = ["i", "am", "good", "with", "learning", "."];
for ( var data in array_itr ) {
document.write(array_itr[ data ]);
}
});
</script>
</head>
<body>
</body>
</html>Output:
Conclusion
- The jquery array iteration helps to reduce source code size and save the memory.
- The array iteration helps to handle a large amount of data to the user and developer.
- Similar types of data collection easily handle and operated by array iteration.
Recommended Articles
This is a guide to jQuery array iteration. Here we discuss How to perform array iteration in jquery along with the examples and outputs. You may also have a look at the following articles to learn more –
