How to use jQuery each() method_jquery

Both jQuery and jQuery objects implement this method. For jQuery objects, the each method is simply delegated: the jQuery object is passed as the first parameter to jQuery's each method. In other words: the each method provided by jQuery is All sub-elements in the object provided by parameter 1 are called one by one. The each method provided by the jQuery object calls the sub-elements inside jQuery one by one.

Copy code The code is as follows:

jQuery.prototype.each=function( fn, args ) {
return jQuery.each( this, fn, args );
}

Let us take a look at the specific implementation of each method provided by jQuery,
jQuery.each(obj ,fn,arg)
This method has three parameters: the object obj to be operated on, the function fn to be operated on, and the function parameters args.
Let us discuss based on the ojb object:

1. The obj object is an array
The each method will call the fn function one by one on the sub-elements in the array until the result returned by calling a certain sub-element is Until false, that is to say, we can process it with the provided fn function and exit the each method call after it meets certain conditions. When the each method provides the arg parameter, the parameter passed in by the fn function call is arg, otherwise: the sub-element index, the sub-element itself
2.obj The object is not an array
The biggest difference between this method and 1 is: The fn method will be executed one by one regardless of the return value. In other words, all properties of the obj object will be called by the fn method, even if the fn function returns false. The parameters passed in the call are similar to 1.

Copy code The 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;
}

Special attention should be paid to the each method The specific calling method of fn is not simple fn(i,val) or fn(args), but takes the form of fn.call(val,i,val) or fn.apply(obj.args), which means Then, in your own fn implementation, you can directly use this pointer to reference the sub-elements of the array or object. This method is an implementation method used by most jQuery.
There is an each method in jQuery, which is very fun to use. You don’t need to write a for loop like before. There are also many uses of each method in the jQuery source code.
In fact, the each method in jQuery is implemented through the call method in js.
The following is a brief introduction to the call method.
The call method is very wonderful. In fact, the official description is: "Call a method of an object and replace the current object with another object." More explanations on the Internet are to change the context environment, and some say to change the context. this pointer.
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
Parameters
thisObj
Optional. The object that will be used as the current object.
arg1, arg2, , argN
Optional. A sequence of method parameters will be passed.
Description
The call method can be used to call a method instead of another object. The call method changes the object context of a function from the initial context to the new object specified by thisObj.
Quoting a very classic example on the Internet
Js code

Copy code The code is as follows:

function add(a,b)
{
alert(a b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);

Replace sub with add, add.call(sub,3,1) == add(3,1) , so the running result is: alert(4);
Note: Functions in js are actually objects, and the function name is a reference to the Function object.
I won’t mention the specific call in more detail here.
Here are some common uses of jQuery's each method
Js code

Copy code The code is as follows:

var arr = [ "one", "two", "three", "four"];
$.each(arr, function(){
alert(this);
});
//The output results of each above 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, item is equivalent to taking each one-dimensional array,
//item[0] is equivalent to taking the first value in each one-dimensional array
//So the output of each above 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, it can cycle through every attribute
//The output result is: 1 2 3 4