How to Use the jQuery each () method

JQuery and jQuery objects both implement this method. For jQuery objects, they simply delegate the each method: The jQuery object is passed to jQuery's each method as the first parameter. in other words, the each method provided by jQuery calls all the child elements of the object provided by parameter 1 one by one. The each method provided by the jQuery object calls the child elements in jQuery one by one.
Copy codeThe Code is as follows:
JQuery. prototype. each = function (fn, args ){
Return jQuery. each (this, fn, args );
}

Let's take a look at the specific implementation of the each method provided by jQuery,
JQuery. each (obj, fn, arg)
This method has three parameters: the object for the operation (obj), the fn function for the operation, and The args parameter of the function.
Let's discuss it based on the ojb object:

1. The obj object is an array.
The each method calls the fn function one by one for the sub-elements of the array until the returned result of a sub-element is false. That is to say, we can process the fn function provided, the each method is called after certain conditions are met. When the each method provides the arg parameter, the incoming parameter of the fn function call is arg. Otherwise, it is a sub-element index and the sub-element itself.
2. The obj object is not an array.
The biggest difference between this method and 1 is that the fn method will be carried out without considering the return value. In other words, all properties of the obj object are called by the fn method, even if the fn function returns false. The input parameters of the call are similar to those of 1.
Copy codeThe Code is as follows:
JQuery. each = function (obj, fn, args ){
If (args ){
If (obj. length = undefined ){
For (var I in obj)
Fn. apply (obj, args );
} Else {
For (var I = 0, ol = obj. length; I <ol; I ++ ){
If (fn. apply (obj, args) = false)
Break;

}

}
} Else {
If (obj. length = undefined ){
For (var I in obj)
Fn. call (obj, I, obj );
} Else {
For (var I = 0, ol = obj. length, val = obj [0]; I <ol & fn. call (val, I, val )! = False; val = obj [++ I]) {}

}
}
Return obj;
}

Note that the call method of fn in the each method does not use simple fn (I, val) or fn (args), but uses fn. call (val, I, val) or fn. apply (obj. args), which means that in your own fn implementation, you can directly use the this pointer to reference arrays or child elements of objects. This is an implementation method adopted by the vast majority of jQuery.
There is an each method in jQuery, which is very easy to use and does not need to write a for loop as before. There are also many each methods used in jQuery source code.
In fact, the each method in jQuery is implemented through the call method in js.
The following describes the call method.
The call method is amazing. In fact, the official explanation is: "call a method of an object and replace the current object with another object ." The explanation on the Internet is to change the context, or change the context this pointer.
Call ([thisObj [, arg1 [, arg2 [, [,. argN])
Parameters
ThisObj
Optional. Will be used as the object of the current object.
Arg1, arg2, and argN
Optional. The method parameter sequence will be passed.
Description
The call method can be used to call a method instead of another object. The call method can change the object context of a function from the initial context to the new object specified by thisObj.
There is a classic example to reference online
Js Code
Copy codeThe Code is as follows:
Function add (a, B)
{
Alert (a + B );
}
Function sub (a, B)
{
Alert (a-B );
}
Add. call (sub, 3, 1 );

Use add to replace sub, add. call (sub, 3, 1) = add (3, 1), so the running result is: alert (4 );
Note: Functions in js are actually objects, and Function names are references to Function objects.
More in-depth call is not mentioned here.
The following describes some common usage of jQuery's each method.
Js Code
Copy codeThe Code is as follows:
Var arr = ["one", "two", "three", "four"];
$. Each (arr, function (){
Alert (this );
});
// The above each output results are: one, two, three, four
Var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]
$. Each (arr1, function (I, item ){
Alert (item [0]);
});
// In fact, arr1 is a two-dimensional array, and item is equivalent to taking every one-dimensional array,
// Item [0] is relative to the first value in each one-dimensional array.
// Therefore, the above each output is: 1 4 7
Var obj = {one: 1, two: 2, three: 3, four: 4 };
$. Each (obj, function (key, val ){
Alert (obj [key]);
});
// This each is even more powerful and can loop through every attribute.
// Output result: 1 2 3 4