jQuery source code analysis of each function $. each and $. fn.each method in detail

Keywords: Javascript JQuery

An $. each is generally used to traverse an array or object, $. fn.each() is the operation that a jQuery instance can perform (because $. FN is the prototype of a jQuery object)

each is used to traverse an array or object, perform drop-back functions in turn, and finally return the passed array or object to support the chain operation. Three parameters can be passed as follows:

object. Objects or arrays to be traversed

callback. The function to be executed can take two parameters to represent the index (key name if traversing object) and the value of the element, respectively.

Writby: Great Desert QQ:22969969

args. An array. If this value is set, then the parameter in the function corresponding to parameter 2 is the value, which can be generally ignored.

The $. fn.each is implemented by calling $. each, and the parameter 1 it passes in is the current object this

For example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <script>
        var A = [11,12,13,14,15]
        $.each(A,function(index,elem){console.log(index,elem);})    //Output five lines of information, respectively:0 11,1 12,2 13,3 14,4 15
        $.each(A,function(){console.log(arguments)},[1,2])          //Output five lines of the same information, is an array, are[1,2]
        $('p').each(function(i,elem){
            console.log(elem.innerHTML);                            //Output 1, 2
        })      
    </script>
</body>
</html>

The output is as follows:

 

Source code analysis

The $. each is loaded through $. extend(), which is implemented as follows:

  // args is for internal usage only
  each: function( object, callback, args ) {        //A general traversal iteration method is used to seamlessly traverse objects and arrays. object Is an object or array to traverse args It's a transfer callback function. callback Array of parameters
    var name, i = 0,
      length = object.length,
      isObj = length === undefined || jQuery.isFunction( object );

    if ( args ) {                                         //If an array of parameters is passed in, the function's apply Method executes the function
      if ( isObj ) {
        for ( name in object ) {                              //For objects, through for-in Loop traversal properties
          if ( callback.apply( object[ name ], args ) === false ) {         //From here we can see that Dang each()When a function passes in parameter 3, parameter 3 passes on to the function represented by parameter 2.
            break;
          }
        }
      } else {
        for ( ; i < length; ) {                               //For array or class array objects, the for Cyclic ergodic Subscripts
          if ( callback.apply( object[ i++ ], args ) === false ) {
            break;
          }
        }
      }

    // A special, fast, case for the most common use of each
    } else {                                              //If no parameters are passed in args,Then call the function's call Method to execute this method
      if ( isObj ) {
        for ( name in object ) {                                //For objects, through for-in Loop traversal property name
          if ( callback.call( object[ name ], name, object[ name ] ) === false ) {    //From here we can see that Dang each()When the function ignores parameter 3, the two parameters of the function represented by parameter 2 are index Location and elements currently being processed.
            break;
          }
        }
      } else {
        for ( ; i < length; ) {                                 //For array or class array objects, the for Cyclic ergodic Subscripts
          if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
            break;
          }
        }
      }
    }

    return object;
  },

It's simple to execute each function in turn by for traversal.

For $. fn.each(), its implementation code is as follows:

    each: function( callback, args ) {
        return jQuery.each( this, callback, args );
    },

Parameter 1 passes this, that is, the current jQuery object, the jQuery object is an array of classes, so it traverses all Dom references that are executed in the entry module, and executes functions in turn.

Posted by toms on Tue, 01 Oct 2019 07:22:43 -0700