JQuery. fn. each And jQuery. each usage in jQuery source code analysis, jqueryjquery. each

JQuery. fn. each And jQuery. each usage in jQuery source code analysis, jqueryjquery. each

This document describes how to use jQuery. fn. each And jQuery. each in jQuery source code analysis. 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 div element.
Copy codeThe Code is as follows: $ ('div '). each (function (index, elem ){

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

The above. each, that is, jQuery. fn. each, is implemented through jQuery. each internally.
Copy codeThe 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.
Copy codeThe 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 div elements on the page
Copy codeThe Code is as follows: $ ('div '). each (function (index, elem ){

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

Add the red class to the first five div elements on the page
Copy codeThe Code is as follows: $ ('div '). 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.
Copy codeThe 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
Copy codeThe 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
Copy codeThe 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.
Copy codeThe Code is as follows: $. each ({name: "John", lang: "JS"}, function (k, v ){

Alert ("Key:" + k + ", Value:" + v );
}
});
Source code:
Copy codeThe 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 ~
Copy codeThe 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:
Copy codeThe 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.