jQuery.each USES details

  • 2020-07-21 06:52:05
  • OfStack

The jQuery. each method is one of the core tool methods of jQuery. It is a generic example traversal method that can be used to iterate over objects and arrays. Unlike the $().each () method that iterates over an jQuery object, this method can be used to iterate over any object. Two parameters are usually required

object: Objects or arrays that need to be iterated.

callback: Callback function performed by each member/element.

The callback function takes two arguments: the first is the index of the object's member or array, and the second is the corresponding variable or content. Exiting the each loop causes the callback function to return false, and other return values are ignored.

Iterate through the array, using both the element index and the content. Examples are as follows:


// Object, using both the member name and the variable content. 

$.each( [0,1,2], function(i, n){
 alert( "Item #" + i + ": " + n );
});
// Object, using both the member name and the variable content. 

$.each( { name: "John", lang: "JS" }, function(i, n){
 alert( "Name: " + i + ", Value: " + n );
});

You can also use instance calls directly


  $( 'div' ).each( function(i,n){
    return i+n.text;
  } )

In fact, the instance (prototype) method is also the static method of the call in the source code, so analyzing the each method only needs to analyze its static method, and the instance call is just a special case of using the static method.


// Execute a callback for every element in the matched set.
  // (You can seed the arguments with an array of args, but this is
  // only used internally.)
  each: function( callback, args ) {
    return jQuery.each( this, callback, args );
  },

In the prototype method, the this object is passed directly as an object to be traversed. The following is the source code of the static method


// args is for internal usage only
  each: function( object, callback, args ) {
    var name, i = 0,
      length = object.length,
      isObj = length === undefined || jQuery.isFunction( object );
    if ( args ) {
      if ( isObj ) {
        for ( name in object ) {
          if ( callback.apply( object[ name ], args ) === false ) {
            break;
          }
        }
      } else {
        for ( ; i < length; ) {
          if ( callback.apply( object[ i++ ], args ) === false ) {
            break;
          }
        }
      }

    // A special, fast, case for the most common use of each
    } else {
      if ( isObj ) {
        for ( name in object ) {
          if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
            break;
          }
        }
      } else {
        for ( ; i < length; ) {
          if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
            break;
          }
        }
      }
    }

    return object;
  },

Things are not many, the first to accept three parameters, this time will pay attention to in the manual we often use 1 kind is to write two parameters we use 1 kind is to use two arguments, but in fact there are three parameters in the source code can be accepted, the third parameter is an array, will act as a parameter to the callback function.

First declare a few variables. i, name, and length are for loops. isObj is to distinguish between an array and an object for convenience.

isObj = length === undefined || jQuery.isFunction( object );
This is a very concise statement that takes advantage of the precedence of the operators: ===

In fact, such a judgment is not very accurate, just a general distinction, such as:


 var obj={length:'a'};
 var isObj= obj.length=== undefined || jQuery.isFunction( obj );
 alert(isObj); //false

And then we're going to make a distinction based on whether or not we added the third parameter, so let's look at the case where we didn't add it


} else {
      if ( isObj ) {
        for ( name in object ) {
          if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
            break;
          }
        }
      } else {
        for ( ; i < length; ) {
          if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
            break;
          }
        }
      }
    }

"Distinguish" arrays from objects according to the isObj variable, using for loops for arrays and for loops for objects... in cycle, each cycle 1 this will be executed one callback function and the current loop array or object key and the value transfer into, call method used here, the first parameter is the function of "this", that is, the value of the current loop as this behind two is the key and the value or a pointer, and values, so we use loop using the second parameter of the callback function to use this is 1 sample. Such as:


// So this example right over here 
 $( 'div' ).each( function(i,n){
    return i+n.text;
  } )
// Is equivalent to 
 $( 'div' ).each( function(i,n){
    return i+this.text;
  } )

For added the third parameter is changed, by value of the callback function is used apply ways to pass parameters, this point is still the current value just put args is the third parameter passed in an array, the array how many parameters of the callback function will how many parameters can be used to note here is the third one is js form can't be a class array acoustic array or jQuery object or complains because apply method is not supported. If the callback function returns false then the loop will be skipped for example we can just handle the odd subscript array if it's an even item and we can execute return false in the callback function


return object;

Returns the original object or array, etc

This is the end of this article, I hope you enjoy it.


Related articles: