EDUCBA

Home Software Development Software Development Tutorials jQuery Tutorial jQuery array loop

jQuery array loop

Updated April 10, 2023

jQuery array loop

Introduction to jQuery array loop

The jquery array loop is iterating the array and array object using each method in the programming. The number of array index and array value modifies or operates using a loop in the source code called jquery array loop. It helps to reduce the large size of source code and interface to get the required output. The array loop is a function to avoid repetition of the same programming and handle a large amount of the data. The array loop is a method used to handle array information in single-line source code and get the output without wasting data memory. The jquery array index is a function using to iterate the array value and their index numerically from the zero to array length – 1.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Syntax

  • The array loop syntax with array value is below.
$.each ( jquery array, jquery callback function);

Example of the syntax 1:

$.each ( [32, 46, 88], function (indexes, values)
);
  • The array loop syntax with array object is below.
$.each ( jquery array object, jquery callback function);

Example of the syntax 2:

var jalobject = [6, 3, 1];
$.each ( jalobject, function (indexes, values)
);

Description of the syntax:

  • The “$” sign is represented to define the jquery and access the Jquery.
  • The “each ()” method is used for iterating the array object in the loop format.
  • The “jquery array” is represented to display array values or array objects inside of each () method.
  • The “jquery callback function” represents the array index and array value inside of each () method.
  • The callback function helps to return the array index value and their array object value.

How to create an array loop 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 placed inside of the body section on the HTML page.

<script> write a jquery code here… </script>

The array loop first method is below.

  • The place array loop with array value syntax here.
$.each ( [32, 46, 88], function (indexes, values)
);
  • Return the array value and their indexes.
document.write( indexes+ "-" + values "<br/>");

The array loop second method is below.

  • Create a variable and initialize the array value.
var arrayloop_object = [ 43, 21, 98, 45 ];
  • The variable object placed inside of each method.
$.each (arrayloop_object, function( indexes, values ) {
Write required code values here…
});
  • Return the array object value as per user requirements.
document.write( indexes + ": " + values+ "<br/>" );

Combine the working procedure of the array loop.

<!DOCTYPE>
<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/>" );
var arrayloop_object = [ 43, 21, 98, 45 ];
$.each (arrayloop_object, function( indexes, values ) {
document.write( indexes + ": " + values+ "<br/>" );
});
</script>
</head>
<body>
</body>
</html>

jQuery array loop output 1

Examples

Here are the following examples mention below

Example #1

The basic array loop example and output.

Example part 1: The jquery array loop with array value example.

<!DOCTYPE>
<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, 34, 44, 65, 88], function( indexes, values ) {
document.write( indexes + ": " + values+ "<br/>" );
});
</script>
</head>
<body>
</body>
</html>

Output:

jQuery array loop output 2

Example part 2: The array loop with array object example.

<!DOCTYPE>
<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/>" );
var arrayloop_object = [ 43, 21, 98, 45 ];
$.each (arrayloop_object, function( indexes, values ) {
document.write( indexes + ": " + values+ "<br/>" );
});
</script>
</head>
<body>
</body>
</html>

Output:

jQuery array loop output 3

Example #2

The basic array loop with string value example and output.

Example part 1: The basic jquery string array loop example.

<!DOCTYPE>
<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 ( ["jquery", "array", "loop", "example"], function( indexes, values ) {
document.write( indexes + ": " + values+ "<br/>" );
});
</script>
</head>
<body>
</body>
</html>

Output:

output 4

Example part 2: The jquery string array loop using object example.

<!DOCTYPE>
<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/>" );
var assign = ["jquery", "array", "loop", "is", "useful"]
$.each ( assign, function( indexes, values ) {
document.write( indexes + ": " + values+ "<br/>" );
});
</script>
</head>
<body>
</body>
</html>

Output:

output 5

Example #3

The array loop with string key and value example and output.

<!DOCTYPE>
<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/>" );
var assign = {
"name": "jquery",
"learn": "tutorial",
"category": "array",
"subcategory": "loop",
"type": "online",
};
$.each ( assign, function( indexes, values ) {
document.write( indexes + ": " + values+ "<br/>" );
});
</script>
</head>
<body>
</body>
</html>

Output:

output 6

Example #4

Display the string and numerical value in the array loop example and output.

<!DOCTYPE>
<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/>" );
var assign = {
"sunday" : "1",
"monday" : "2",
"tuesday" : "3",
"wednesday" : "4",
"thursday" : "5",
"friday" : "6",
"saturday" : "7",
};
$.each ( assign, function( indexes, values ) {
document.write( indexes + ": " + values+ "<br/>" );
});
</script>
</head>
<body>
<div id = "sunday"> </div>
<div id = "monday"> </div>
<div id = "tuesday"> </div>
<div id = "wednesday"> </div>
<div id = "thursday"> </div>
<div id = "friday"> </div>
<div id = "saturday"> </div>
</body>
</html>

Output:

output 7

Conclusion

  • The Jquery array loop is useful to maintain the source code size and handle the large data in loop format.
  • The array loop helps for reducing memory size and remove the repetition of the data.
  • The array loop is an easy, user-friendly, and usable function in source code.

Recommended Articles

This is a guide to jQuery array loop. Here we discuss How to create an array loop in jquery along with the examples and outputs. You may also have a look at the following articles to learn more –

  1. jQuery next()
  2. jQuery grep
  3. jQuery map()
  4. jQuery Select Option
quiz