jQuery.each()与each()

.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( Integerindex, Elementelement )
  
  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 keywordthisrefers 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 returningfalse.

Note: most jQuery methods that return a jQuery object also loop through the set of elements in the jQuery collection — a process known asimplicit iteration. When this occurs, it is often unnecessary toexplicitlyiterate 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>

jQuery.each()与each()

jQuery.each( array, callback )Returns:Object

version added:1.0jQuery.each( array, callback )

version added:1.0jQuery.each( object, callback )

Examples:

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

Demo:

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

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

.each()

.each( function )Returns:jQuery

version added:1.0.each( function )

Examples:

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

Demo:

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

Demo:

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

Demo:

你可能感兴趣的:(jquery)

jQuery.each()与each()

jQuery.each( array, callback )Returns:Object

version added:1.0jQuery.each( array, callback )

version added:1.0jQuery.each( object, callback )

Examples:

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

Demo:

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

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

.each()

.each( function )Returns:jQuery

version added:1.0.each( function )

Examples:

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

Demo:

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

Demo:

Example:Usereturn falseto break out of each() loops early.

Demo:

你可能感兴趣的:(jquery)

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

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