How to use the .each() function in jQuery

The .each() is used for looping in jQuery. It is similar to foreach loop in the PHP which loops until it gets data.

It works with an Array, Object, and jQuery selector, and you don’t have the need to know how much data are available it performs iteration continuously until it gets data that makes it differ from other looping methods.

While iteration it also keeps tracking the element index.

---

Contents

1. JavaScript Array
2. JavaScript Object
3. Selector
4. Conclusion

---

1. JavaScript 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 Pure JavaScript

You can also do the same operation simply with JavaScript only using forEach, for-in,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. JavaScript 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 Pure 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. 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

$.each() makes your looping work simpler, you can easily loop over all DOM elements.

It’s good to use .each method 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() method or forEach, for-in, for-of, for loops for iteration.

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