.each()

jQuery

previous page next page

.each()

Categories: Miscellaneous > Collection Manipulation | Traversing

.each( function(index, Element) ) Returns: jQuery

Description: Iterate over a jQuery object, executing a function for each matched element.

  • version added: 1.0.each( function(index, Element) )

    • function(index, Element)
      Type: Function()
      A function to execute for each matched element.

The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.

Suppose you have a simple unordered list on the page:

1
2
3
4
 
                                

                                  

                                    
                                      <ul>
                                    
                                  

                                

                                

                                  

                                        <li>foo</li>
                                  

                                

                                

                                  

                                        <li>bar</li>
                                  

                                

                                

                                  

                                    
                                      </ul>

You can select the list items and iterate across them:

1
2
3
 
                                

                                  

                                    $( "li" ).each(function( index ) {
                                  

                                

                                

                                  

                                      console.log( index + ": " + $(this).text() );
                                  

                                

                                

                                  

                                    });

A message is thus logged for each item in the list:

0: foo 1: bar

You can stop the loop from within the callback function by returning false.

Note: most jQuery methods that return a jQuery object also loop through the set of elements in the jQuery collection — a process known as implicit iteration. When this occurs, it is often unnecessary to explicitly iterate with the .each() method:

1
2
3
4
5
6
7
 
                                

                                  

                                    
                                      // The .each() method is unnecessary here:
                                    
                                  

                                

                                

                                  

                                    $( "li" ).each(function() {
                                  

                                

                                

                                  

                                      $(this).addClass( "foo" );
                                  

                                

                                

                                  

                                    });
                                  

                                

                                

                                  

                                     
                                  

                                

                                

                                  

                                    
                                      // Instead, you should rely on implicit iteration:
                                    
                                  

                                

                                

                                  

                                    $( "li" ).addClass( "bar" );

Examples:

Example: Iterate over three divs and sets their color property.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                        div { color:red; text-align:center; cursor:pointer;
                                    

                                  

                                  

                                    

                                              font-weight:bolder; width:300px; }
                                    

                                  

                                  

                                    

                                        </style>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <div>Click here</div>
                                    

                                  

                                  

                                    

                                        <div>to iterate through</div>
                                    

                                  

                                  

                                    

                                        <div>these divs.</div>
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                          $(document.body).click(function () {
                                    

                                  

                                  

                                    

                                            $( "div" ).each(function (i) {
                                    

                                  

                                  

                                    

                                              if ( this.style.color != "blue" ) {
                                    

                                  

                                  

                                    

                                                this.style.color = "blue";
                                    

                                  

                                  

                                    

                                              } else {
                                    

                                  

                                  

                                    

                                                this.style.color = "";
                                    

                                  

                                  

                                    

                                              }
                                    

                                  

                                  

                                    

                                            });
                                    

                                  

                                  

                                    

                                          });
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>

Example: To access a jQuery object instead of the regular DOM element, use $(this). For example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                        ul { font-size:18px; margin:0; }
                                    

                                  

                                  

                                    

                                        span { color:blue; text-decoration:underline; cursor:pointer; }
                                    

                                  

                                  

                                    

                                        .example { font-style:italic; }
                                    

                                  

                                  

                                    

                                        </style>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        To do list: <span>(click here to change)</span>
                                    

                                  

                                  

                                    

                                        <ul>
                                    

                                  

                                  

                                    

                                          <li>Eat</li>
                                    

                                  

                                  

                                    

                                          <li>Sleep</li>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                          <li>Be merry</li>
                                    

                                  

                                  

                                    

                                        </ul>
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                          $( "span" ).click(function () {
                                    

                                  

                                  

                                    

                                            $( "li" ).each(function(){
                                    

                                  

                                  

                                    

                                              $( this ).toggleClass( "example" );
                                    

                                  

                                  

                                    

                                            });
                                    

                                  

                                  

                                    

                                          });
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>

Example: Use "return" to break out of each() loops early.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                        div { width:40px; height:40px; margin:5px; float:left;
                                    

                                  

                                  

                                    

                                              border:2px blue solid; text-align:center; }
                                    

                                  

                                  

                                    

                                        span { color:red; }
                                    

                                  

                                  

                                    

                                        </style>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <button>Change colors</button>
                                    

                                  

                                  

                                    

                                        <span></span>
                                    

                                  

                                  

                                    

                                        <div></div>
                                    

                                  

                                  

                                    

                                        <div></div>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                        <div></div>
                                    

                                  

                                  

                                    

                                        <div></div>
                                    

                                  

                                  

                                    

                                        <div id="stop">Stop here</div>
                                    

                                  

                                  

                                    

                                        <div></div>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                        <div></div>
                                    

                                  

                                  

                                    

                                        <div></div>
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                          $( "button" ).click(function () {
                                    

                                  

                                  

                                    

                                            $( "div" ).each(function ( index, domEle) {
                                    

                                  

                                  

                                    

                                              // domEle == this
                                    

                                  

                                  

                                    

                                              $( domEle ).css( "backgroundColor", "yellow" );
                                    

                                  

                                  

                                    

                                              if ( $(this).is( "#stop" ) ) {
                                    

                                  

                                  

                                    

                                                $( "span" ).text( "Stopped at div index #" + index );
                                    

                                  

                                  

                                    

                                                return false;
                                    

                                  

                                  

                                    

                                              }
                                    

                                  

                                  

                                    

                                            });
                                    

                                  

                                  

                                    

                                          });
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page