How to Use jQuery Each to Iterate Through Arrays Objects and Selectors

jQuery revolutionized web development with its simplicity and powerful features. Among them is the “jquery foreach” loop, enabled by the `$.each()` method.

This article explores how this method efficiently iterates through arrays, objects, and selectors. Gone are the days of cumbersome loops and complex constructs. With the “jquery foreach” loop, you can effortlessly navigate collections, significantly reducing development time.

Whether you’re a seasoned developer or a beginner, this article equips you with the knowledge to master the `$.each()` method and unleash its full potential.

Let’s dive into the world of jQuery iteration and elevate your web development skills with the “jquery foreach” loop.

---

Contents

1. Use jQuery each to iterate through Array
2. Use jQuery each to iterate through Object
3. Use jQuery each to iterate through Selector
4. Conclusion

---

1. Use jQuery each to iterate through Array

First, start with looping over an Array.

Syntax –

$.each(Array or Object , function(index, value){
    // statements
});

$.each() function takes two parameters –

• The First parameter is your Array or Object on which you are iterating.
• The second parameter is a callback function that has two arguments index and value. It is being called on every iteration.

Example

var friends_arr = ["Sonarika","Vishal","Sunil","Vijay"];

$(document).ready(function(){
    $.each(friends_arr, function(index,value){
         console.log( index + " : " + value );
    });
});

Output

0 : Sonarika
1 : Vishal
2 : Sunil
3 : Vijay

In the above example, I looped over friends_arr Array and when the callback function is called then gets the current iteration index position and value.

---

With Vanilla JavaScript

You can also do the same operation simply with JavaScript only using forEach, for-in, and for-of for this you don’t have to require the jQuery library.

Example

Here, I am using forEach for iteration.

friends_arr.forEach(function(value){
     console.log(value);
});

---

2. Use jQuery each to iterate through Object

You can also use it with Object, its syntax is similar to Array.

Example

var obj = [
    {"name":"Sonarika","age":"23"},
    {"name":"Vishal","age":"25"},
    {"name":"Sunil","age":"24"},
    {"name":"Vijay","age":"24"},
];
$(document).ready(function(){
    $.each(obj, function(index,value){
         console.log( index + " : " + value.name + "("+ value.age +") );
    });
});

Output

0 : Sonarika(23)
1 : Vishal(25)
2 : Sunil(24)
3 : Vijay(24)

---

With Vanilla JavaScript

Same as in JavaScript Array you can also use forEach,for-in with Object also.

Example

Here, I am using for-in loop

for(value in obj){
     console.log(obj[value].name);
}

---

3. Use jQuery each to iterate through Selector

.each() mainly used to work with the selector, for example – selecting particular class elements, traversing through child elements, get all checked checkboxes, etc.

Syntax

$( selector ).each(function(index, element){
    // statement
});

Here, are some examples where you can use it within your project.

---

Select Class elements

Example

$(document).ready(function(){

    $('#but').click(function(){
         $('ul').empty();
         // Traversing on all elements which have red class
         $('.red').each(function(index,element){
              $('ul').append('<li>' + index + ' : ' + $(element).val() + '</li>' );
         });
    });

});

View Demo

---

Reading all options in <select> element

$(document).ready(function(){
    $("#sel_lang option").each(function(index,element){
         $('ul').append('<li>' + index + ' : ' + $(element).val() + '</li>' );
    });

});

View Demo

---

Get all checked Checkboxes

$(document).ready(function(){
    $("#but").click(function(){
         $("ul").empty();
         // Reading all checked checkboxes
         $("input[type=checkbox]:checked").each(function(index,element){
              $("ul").append('<li>checked ' + index + ' : ' + $(element).val() + "</li>");
         });
    });
});

View Demo

---

4. Conclusion

jQuery .each() function is a powerful tool for iterating through arrays, objects and DOM elements. By using this function, you can easily perform actions on each element or property in a collection, such as logging values to the console or updating values in an array or object.

The basic syntax for the .each() function is simple and easy to understand, making it a great choice for both beginner and experienced JavaScript developers.

It’s good to use .each() when you’re working with jQuery data like a selector that returns multiple elements and If you are working with an Array or JSON object you can either use .each() function or forEach, for-in, for-of, for loops for iteration.

If you found this tutorial helpful then don't forget to share.