JQuery. fn. each And jQuery. each in jQuery source code analysis

This article mainly introduces jQuery source code analysis. fn. each And jQuery. the usage of each is analyzed in detail, which is very useful. If you need it, you can refer to the examples in this article to describe jQuery in jQuery source code analysis. fn. each And jQuery. each usage. Share it with you for your reference. The specific analysis is as follows:

In the previous example, the following code adds a red class to each selected p element.

The Code is as follows:

$ ('P'). each (function (index, elem ){

$ (This). addClass ('red ');
}
});

The above. each, that is, jQuery. fn. each, is implemented through jQuery. each internally.

The Code is as follows:

JQuery. fn. each

First, post the official API description, which is very simple and requires only two points of attention.
In the above example, $ (this). addClass ('red'), where this refers to the dom element of the current operation
Any value can be returned for the method passed in each. When the returned value is false, the current loop operation is skipped.

The Code is as follows:

/**

* @ Description: execute a method for each dom element matched in the jQuery object.

* @ Param {Number} index the position of the current processing element in the Set

* @ Param {DOMElement} the dom Element currently being processed by the Element

*/
.
. Each (function (index, Element ))

The following are two simple examples:

Example 1:

Add a red class to all p elements on the page

The Code is as follows:

$ ('P'). each (function (index, elem ){

$ (This). addClass ('red ');
}
});

Example 2

Add the red class to the first five p elements on the page

The Code is as follows:

$ ('P'). each (function (index, elem ){

If (index> = 5) return false; // jump out of the loop
$ (This). addClass ('red ');
}
});

As above, the usage is quite simple, do not repeat, detailed can view http://api.jquery.com/each/

The source code is implemented through jQuery. each. The following describes the source code of jQuery. each and the source code of jQuery. each. The source code of jQuery. fn. each is simple.

JQuery. each:

Let's take a simple example first.

The Code is as follows:

$. Each ([52, 97], function (index, value ){
Alert (index + ':' + value + ':' + this );
}
});

The output content is as follows:

0: 52-52
1
1: 97-97

Official API description

There are two points of attention.

In the above example, this is an element in the set, that is, the following valueOfElement
Return false in callback to jump out of the loop

The Code is as follows:

/**

* @ Description performs an operation on each element in the Set (array or object ).

* @ Param {Number | String} location of the indexInArray element in the collection (for example, if the set is an array, It is a Number; if the set is an object, it is a key value)

* @ Param {AnyValue} elements in the valueOfElement set

*/
J
JQuery. each (collection, callback (indexInArray, valueOfElement ))

Example 1

The Code is as follows:

$. Each (['one, 'two', 'three ', 'four'], function (index, value ){

If (index> = 2) return false;

Alert ("Index:" + index + ", value:" + value );
}
});

Example 2

Copy the example directly from the official website.

The Code is as follows:

$. Each ({name: "John", lang: "JS"}, function (k, v ){

Alert ("Key:" + k + ", Value:" + v );
}
});

Source code:

The Code is as follows:

// Args is for internal usage only
E
Each: function (obj, callback, args ){

Var value,

I = 0,

Length = obj. length,

IsArray = isArraylike (obj); // If obj is an array-like object, for example, {'0': 'hello', '1': 'World', 'length ': 2}, actually serving jQuery objects

If (args) {// args, but we didn't find the actual function of this parameter ~~ You can simply skip the content in else and check whether the parameters passed by callback are different.
If (isArray ){
For (; I <length; I ++ ){
Value = callback. apply (obj [I], args );
If (value = false ){
Break;
}
}
} Else {
For (I in obj ){
Value = callback. apply (obj [I], args );
If (value = false ){
Break;
}
}
}
// A special, fast, case for the most common use of each
} Else {
If (isArray) {// process the Array
For (; I <length; I ++ ){
Value = callback. call (obj [I], I, obj [I]);
If (value = false ){
Break;
}
}
} Else {// processing object
For (I in obj ){
Value = callback. call (obj [I], I, obj [I]); // value indicates the return value of callback.
If (value = false) {// note that when value = false, the loop jumps out.
Break;
}
}
}
}
Return obj;
}
},

Late jQuery. fn. each source code:

It's really easy. It's okay to understand jQuery. each ~

The Code is as follows:

Each: function (callback, args ){

Return jQuery. each (this, callback, args );
}
},

Conclusion

And jQuery. extend, jQuery. fn. like extend, although jQuery. each, jQuery. fn. the each code is very simple, but it also plays a very important role. jQuery uses a lot of these two methods, for example:

The Code is as follows:

JQuery. each ("Boolean Number String Function Array Date RegExp Object Error". split (""), function (I, name ){

Class2type ["[object" + name + "]"] = name. toLowerCase ();
}
});

Therefore, master each!

I hope this article will help you with jQuery programming.