jQuery.each()与each()

最新推荐文章于 2025-09-20 10:33:56 发布

转载最新推荐文章于 2025-09-20 10:33:56 发布 · 872 阅读

网页前端专栏收录该内容

35 篇文章

订阅专栏

jQuery.each( array, callback )Returns: Object

Description: A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function's arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties.

version added: 1.0jQuery.each( array, callback )
- array
  
  Type: Array
  
  The array to iterate over.
- callback
  
  Type: Function( Integer indexInArray, Object value )
  
  The function that will be executed on every object.
version added: 1.0jQuery.each( object, callback )
- object
  
  Type: Object
  
  The object to iterate over.
- callback
  
  Type: Function( String propertyName, Object valueOfProperty )
  
  The function that will be executed on every object.

The $.each() function is not the same as $(selector).each(), which is used to iterate, exclusively, over a jQuery object. The $.each() function can be used to iterate over any collection, whether it is an object or an array. In the case of an array, the callback is passed an array index and a corresponding array value each time. (The value can also be accessed through the this keyword, but Javascript will always wrap the this value as an Objecteven if it is a simple string or number value.) The method returns its first argument, the object that was iterated.

Note: The $.each() function internally retrieves and uses the length property of the passed collection. So, if the collection has a property called length — e.g. {bar: 'foo', length: 10} — the function might not work as expected.

 
          $.each([ 52, 97 ], function( index, value ) {
         
            alert( index + ": " + value );
         
          });

This produces two messages:

0: 52
1: 97

If an object is used as the collection, the callback is passed a key-value pair each time:

 
          var obj = {
         
            "flammable": "inflammable",
         
            "duh": "no duh"
         
          };
         
          $.each( obj, function( key, value ) {
         
            alert( key + ": " + value );
         
          });

Once again, this produces two messages:

flammable: inflammable
duh: no duh

We can break the $.each() loop at a particular iteration by making the callback function return false. Returning non-false is the same as a continue statement in a for loop; it will skip immediately to the next iteration.

Examples:

Example: Iterates through the array displaying each number as both a word and numeral

 
          <!doctype html>
         
          <html lang="en">
         
          <head>
         
            <meta charset="utf-8">
         
            <title>jQuery.each demo</title>
         
            <style>
         
            div {
         
              color: blue;
         
            }
         
            div#five {
         
              color: red;
         
            }
         
            </style>
         
            <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
         
          </head>
         
          <body>
         
          <div id="one"></div>
         
          <div id="two"></div>
         
          <div id="three"></div>
         
          <div id="four"></div>
         
          <div id="five"></div>
         
          <script>
         
          var arr = [ "one", "two", "three", "four", "five" ];
         
          var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 };
         
          jQuery.each( arr, function( i, val ) {
         
            $( "#" + val ).text( "Mine is " + val + "." );
         
            // Will stop running after "three"
         
            return ( val !== "three" );
         
          });
         
          jQuery.each( obj, function( i, val ) {
         
            $( "#" + i ).append( document.createTextNode( " - " + val ) );
         
          });
         
          </script>
         
          </body>
         
          </html>

Demo:

Example: Iterates over items in an array, accessing both the current item and its index.

 
          $.each( [ "a", "b", "c" ], function( i, l ){
         
            alert( "Index #" + i + ": " + l );
         
          });

Example: Iterates over the properties in an object, accessing both the current item and its key.

 
          $.each({ name: "John", lang: "JS" }, function( k, v ) {
         
            alert( "Key: " + k + ", Value: " + v );
         
          });

.each()

Categories: Miscellaneous > Collection Manipulation | Traversing

.each( function )Returns: jQuery

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

version added: 1.0.each( function )
- function
  
  Type: Function( Integer index, Element element )
  
  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 keywordthis refers to the element.

Suppose you have a simple unordered list on the page:

 
           <ul>
          
             <li>foo</li>
          
             <li>bar</li>
          
           </ul>

You can select the list items and iterate across them:

 
           $( "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:

 
           // 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.

 
           <!doctype html>
          
           <html lang="en">
          
           <head>
          
             <meta charset="utf-8">
          
             <title>each demo</title>
          
             <style>
          
             div {
          
               color: red;
          
               text-align: center;
          
               cursor: pointer;
          
               font-weight: bolder;
          
               width: 300px;
          
             }
          
             </style>
          
             <script src="https://code.jquery.com/jquery-1.10.2.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>

Demo:

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

 
           <!doctype html>
          
           <html lang="en">
          
           <head>
          
             <meta charset="utf-8">
          
             <title>each demo</title>
          
             <style>
          
             ul {
          
               font-size: 18px;
          
               margin: 0;
          
             }
          
             span {
          
               color: blue;
          
               text-decoration: underline;
          
               cursor: pointer;
          
             }
          
             .example {
          
               font-style: italic;
          
             }
          
             </style>
          
             <script src="https://code.jquery.com/jquery-1.10.2.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>

Demo:

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

 
           <!doctype html>
          
           <html lang="en">
          
           <head>
          
             <meta charset="utf-8">
          
             <title>each demo</title>
          
             <style>
          
             div {
          
               width: 40px;
          
               height: 40px;
          
               margin: 5px;
          
               float: left;
          
               border: 2px blue solid;
          
               text-align: center;
          
             }
          
             span {
          
               color: red;
          
             }
          
             </style>
          
             <script src="https://code.jquery.com/jquery-1.10.2.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, element ) {
          
               // element == this
          
               $( element ).css( "backgroundColor", "yellow" );
          
               if ( $( this ).is( "#stop" ) ) {
          
                 $( "span" ).text( "Stopped at div index #" + index );
          
                 return false;
          
               }
          
             });
          
           });
          
           </script>
          
           </body>
          
           </html>