The example of this article describes the JQuery.fn.each and Jquery.each usage of jquery source analysis. Share to everyone for your reference. The specific analysis is as follows:
In the first instance, the following code is to add a red class to each of the selected DIV elements
Copy Code code as follows:
$ (' div '). each (function (index, elem) {
$ (this). addclass (' red ');
}
});
Each, that is, the JQuery.fn.each, is implemented internally through the Jquery.each
Copy Code code as follows:
First of all, the official API description, very simple, only two points to note
The $ (this). addclass (' Red ') in the example above, where this refers to the DOM element of the current operation
Each of the methods passed in, you can return any value, and when the value returned is false, the current loop action is jumped out
Copy Code code as follows:
/**
* @description execute a method on each DOM element that matches in the jquery object
* @param {Number} index the position of the current processing element in the collection
* @param {DomElement} element currently processed DOM elements
*/
.
. each (function (index, Element))
Here are two simple examples
Example one:
Add a red class to all the DIV elements on the page
Copy Code code as follows:
$ (' div '). each (function (index, elem) {
$ (this). addclass (' red ');
}
});
Example Two
Add a red class to the top 5 div elements on the page
Copy Code code 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 realized through the Jquery.each, the following on the jquery.each of the source code, finished Jquery.each source code, JQuery.fn.each source is very simple
Jquery.each:
It's also a simple example first.
Copy Code code as follows:
$.each ([+], function (index, value) {
Alert (index + ': ' + value + ': ' + this ');
}
});
The output reads as follows:
0:52-52
1
1:97-97
Class Official API Description
There are also two points of attention
In the example above, this is the element in the collection, which is the following valueofelement
Returns false in callback to jump out of the loop
Copy Code code as follows:
/**
* @description perform an action on each element in the collection (array or object)
* @param {number| String} Indexinarray The corresponding position of the element in the collection, such as a number if the collection is an array, or a key value if the collection is an object.
* @param {Anyvalue} valueofelement elements in the collection
*/
J
Jquery.each (collection, Callback (Indexinarray, valueofelement))
Example One
Copy Code code as follows:
$.each ([' One, ' two ', ' three ', ' four '], function (index, value) {
if (index >= 2) return false;
Alert ("Index:" + index + ", Value:" + value);
}
});
Example Two
From the official website directly copy to the example, make up to see
Copy Code code as follows:
$.each ({name: "John", Lang: "JS"}, function (k, v) {
Alert ("Key:" + K + ", Value:" + V);
}
});
Source:
Copy Code code as follows:
Args is to internal usage only
E
Each:function (obj, callback, args) {
var value,
i = 0,
Length = Obj.length,
IsArray = Isarraylike (obj); Obj is not an array-like object, such as {' 0 ': ' Hello ', ' 1 ': ' World ', ' Length ': 2}, is actually serving the jquery object
if (args) {//args, in fact, did not find this parameter has any practical effect ~ ~ Skip to see what else inside can be, in addition to the parameters of the callback pass no other difference
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) {//processing array
for (; i < length; i++) {
Value = Callback.call (obj[i], I, obj[i]);
if (value = = False) {
Break
}
}
else {//Process object
for (i in obj) {
Value = Callback.call (obj[i], I, obj[i]); Value is the return of callback
if (value = = False) {//note here, when Value===false, jump straight out of the loop
Break
}
}
}
}
return obj;
}
},
Late JQuery.fn.each Source code:
Indeed very simple, as long as the understanding of the Jquery.each should be no problem, nothing to speak of ~
Copy Code code as follows:
Each:function (callback, args) {
Return Jquery.each (this, callback, args);
}
},
Conclusion
As with Jquery.extend, JQuery.fn.extend, although Jquery.each, JQuery.fn.each code is very simple, but also played a very important role, jQuery in a large number of these two methods, for example:
Copy Code code as follows:
Jquery.each ("Boolean number String Function Array Date RegExp Object Error". Split (""), Function (i, name) {
class2type["[Object" + name + "]"] = Name.tolowercase ();
}
});
So, get a grip on each!.
I hope this article will help you with your jquery programming.
