The collection type can be an object or arrays in jQuery.
The $.each method has two variations as follows:
- $.each() – in this method, you can use both array and object
- $(selector).each() – in this method, you can only iterate through objects collection
Following are a few examples of using the jQuery $.each method. The examples will cover using each method in both ways.
An example of using $(selector).each jQuery method
As mentioned earlier, you can only use objects in this method of jQuery.
For that, I have created a parent div, which is a vertical menu. Inside the div, a menu is created by using <ul>, <li>, and <a> tags of HTML.
So hierarchy is: div >> ul >> li >> a
Look at the demo below:
The code that you may copy/paste in your editor:
<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function(){ $(".each_ex").click(function(){ $("li").each(function(){ alert($(this).text()); $('div > ul > li > a').css("background-color","red"); }); }); }); </script> <style> .men_ex{ border-radius:5px; } .men_ex ul { margin: 0; padding: 0; width:185px; list-style-type: none; } .men_ex ul li a { text-decoration: none; color: #fff; padding: 10.5px 11px; background-color: #DA8119; display:block; border-bottom:solid 1px #000; } .men_ex ul li a:visited { color: white; } .men_ex ul li a:hover, .men_ex ul li .current { color: #000; background-color: #FBE9AC; } .show_hide{ position:fixed; margin: 30px 30px; } </style> </head> <body> <div class="men_ex"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> <a href="#" class="each_ex">Execute each method</a> </body> </html>
This is how it worked:
- As you click the link “Execute each method”, on the click event of that link I called $(selector).each method.
- In $.each method, the selector is the li (list item) element.
- This is followed by triggering an alert that will be shown for each li in the document.
- The alert will show text associated with each list item by using $.text property.
- Also, I have changed the background color of menu items by using hierarchy (parent/child).
- You can see that the alert is shown five times i.e. for each list item in the document while the color is changed for only those links that come under that div which contains that menu.
$.each example with a jQuery array
In this example, I will use $.each() method (in above demo, I used $(selector).each()).
As mentioned earlier, you can use different collections including jQuery arrays in $.each method to iterate over elements.
See following example with code followed by a little explanation:
The code:
<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function(){ var arr_example = [10,20,30,40,50,60,70,80,90,100]; $(".each_ex").click(function(){ $.each (arr_example, function( index, value ) { $(".arr_ex").append(index + " " + value + "<BR>"); }); }); }); </script> <style> .arr_ex{ word-spacing:50px; padding-left: 5px; height:200px; width:100px; border: solid 1px red; } </style> </head> <body> <button class="each_ex">Execute each method for array</button> <div>Index : Value</div> <div class="arr_ex"> </div> </body> </html>
Sample Output:
- I have created an array of ten elements in the script.
- As you click on the button, the $.each method is called where you will specify array name, arr_example in that case.
- In jQuery each function, two parameters are given – the first is for the index that starts at zero and the value which is the corresponding array element’s value to that index.
- Next, I used the $.append method to display the current index and value of the array.
- As the button is clicked, the array index and values will be displayed in the specified div element.
Another example of “each” with div element
In this example, I am going to use a few div elements with the same class names.
The $.each method is attached to the link’s click event.
As you click the link “Execute each method” the background color of every other div element will be changed to green.
Code:
<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function(){ $(".each_ex").click(function(){ $(".divcls").each(function(x) { if (x % 2) this.style.backgroundColor = "#008000"; }); }); }); </script> <style> .divcls{ width:30%; height:30px; border:solid 1px black; } .each_ex{ margin: 20px; } </style> </head> <body> <div class="divcls"></div> <div class="divcls"></div> <div class="divcls"></div> <div class="divcls"></div> <div class="divcls"></div> <div class="divcls"></div> <div class="divcls"></div> <div class="divcls"></div> <div class="divcls"></div> <div class="divcls"></div> <a href="#" class="each_ex">Execute each method</a> </body> </html>
When you click the link, $.each method will execute, where inside the function I have dealt with the div element’s divcls class. This line of code will make every other div’s background color to green.
A $(selector).each example with HTML table
In this example, I will use an HTML table to explain each method of jQuery.
- A table is created with a few rows and dummy data.
- The style is also created in internal CSS for the table header, the table row (tr), and the table data.
- As the page loads, all table rows will have the same background.
- As you click on the button “execute each method” the background color of every other row will be changed.
The output:
You can see the same formula is applied as in the case of the Div example. The color of even rows is changed. Similarly, you can add a CSS class to every other row.
Also in that example the each method is attached to click event of the link. If you want that at load time then simply use that code after document.ready statement:
and do not use the click method. See the following example.
Adding new rows and each method example
In this example, a table is created with CSS style including table row background color.
As the page loads, every other table row’s background color will be changed by using each method.
Also, a button is added, “Add row”, that will add a new row to the table.
As you click on the button not only a new row will be added, but $.each method will make every other row colored differently that includes newly added rows.
The code:
<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function(){ $("tr").each(function(x) { if (x % 2) this.style.backgroundColor = "#fff"; }); $(".addrow").click(function(){ $(".tblcls").append("<tr><td>Table data</td><td>Table data</td></tr>"); $("tr").each(function(x) { if (x % 2) this.style.backgroundColor = "#fff"; }); }); }); </script> <style> .tblcls{ border-collapse: collapse; border: 2px solid #006655; } .tblcls th{ border: 1px dashed black; color: #fff; background:#006655; } .tblcls tr{ padding:10px; border: 1px dotted black; color: #000; background:yellow; } .tblcls td{ padding:10px; border: 1px dotted black; color: #000; } </style> </head> <body> <button class="addrow">Add row</button> <table class="tblcls"> <tr> <th>Col 1</th> <th>Col 2</th> </tr> <tr> <td>Table data</td> <td>Table data</td> </tr> <tr> <td>Table data</td> <td>Table data</td> </tr> <tr> <td>Table data</td> <td>Table data</td> </tr> </table> </body> </html>
This line of code is first placed after document.ready() :
and it is also executed after each new row is added to the existing table.
jQuery each with the break
As mentioned earlier, the $.each method can be related to the foreach loop in different programming languages.
The loops generally allow to break at a certain point of iteration either by using break or some other command relating to some other language.
By making the callback function false, the loop will stop or break.
Following is an example of breaking $.each once it is called in the click event:
Code:
<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function(){ var arr_example = [10,20,30,40,50,60,70,80,90,100]; $(".each_ex").click(function(){ $.each (arr_example, function( index, value ) { $(".arr_ex").append(index + " " + value + "<BR>"); return ( value !== 50 ); }); }); }); </script> <style> .arr_ex{ word-spacing:50px; padding-left: 5px; height:200px; width:100px; border: solid 1px red; } </style> </head> <body> <button class="each_ex">Execute each method with return</button> <div>Index : Value</div> <div class="arr_ex"> </div> </body> </html>
We created a loop just like in the above array example with ten elements. Inside the “each” function this line is placed:
That means as the value reaches 50 it will return or break. If you do not use this, all elements of the array will be printed in div element, however, in that case just five elements are displayed.