How To Loop Array In Jquery

In this blog post, we will learn how to loop through an array using jQuery. jQuery is a popular JavaScript library that makes it easier to work with HTML documents, create animations, handle events, and perform Ajax operations. Looping through arrays is a common task in programming, and jQuery provides a simple way to achieve this using the $.each() function.

Using the $.each() Function

The $.each() function is a generic iterator in jQuery that can be used to seamlessly iterate over both objects and arrays. In this tutorial, we will focus on using the $.each() function to loop through an array in jQuery.

The syntax for the $.each() function is as follows:

$.each(array, function(index, value){
    // Your code here

The $.each() function accepts two parameters: the array to be looped through, and a function that will be executed for each element in the array. The function itself receives two arguments: the index of the current element and the value of the current element.

Example: Looping through an Array in jQuery

Let’s say we have the following array of numbers:

var numbers = [10, 20, 30, 40, 50];

To loop through this array using jQuery, we will use the $.each() function as shown in the following example:

$.each(numbers, function(index, value){
    console.log("Index: " + index + ", Value: " + value);

This code will output the following to the console:

Index: 0, Value: 10
Index: 1, Value: 20
Index: 2, Value: 30
Index: 3, Value: 40
Index: 4, Value: 50

As you can see, the $.each() function allows us to easily loop through the elements of an array in jQuery.


In this blog post, we learned how to loop through an array in jQuery using the $.each() function. This function provides a convenient way to iterate over both objects and arrays in jQuery, making it an essential tool for any web developer working with JavaScript and jQuery.