How to use the .each() function in jQuery

The .each() is use 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 many data are available it performs iteration continuously until it getting data that makes it differ from other looping methods.

While iteration it also keeps tracking the element index.

What it’s required?

It mainly requires when you want to perform an action on all child elements or find the collection of elements which have given class, etc.

There are many other cases where you can use this.

How to use the .each() function in jQuery


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 which 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 above example, I looped over friends_arr Array and when the callback function is called then gets 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 required 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 as of 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 use 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>' );
  });
 });

});

Demo

Enter the value in the textboxes and right-click on the text box on which you want to add or remove class ‘red’ and click on the button to see the changes.

Reading all options in <select> element

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

});

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>");
  });
 });
});

Demo

Check the checkboxes and click the button.


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.

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *