How to Use the each function in jQuery

This article introduces the detailed usage of each in jquery. It provides some examples to help you understand it. For more information, see. In jquery, the each () function is a tool-class function provided by almost all frameworks. Through this function, the attribute values of objects and arrays can be traversed and processed. JQuery and jQuery objects both implement this

This article introduces the detailed usage of each in jquery. It provides some examples to help you understand it. For more information, see.

In jquery, the each () function is a tool-class function provided by almost all frameworks. Through this function, the attribute values of objects and arrays can be traversed and processed.

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.
That is to say, 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 subelements in jQuery one by one.

Core code:

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.

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 return value of a sub-element is false.
That is, you can process the provided fn function and exit the each method call after it meets certain conditions.
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 from method 1 is that the fn method will be processed without considering the return value.
That is, all properties of the obj object will be called by the fn method, even if the fn function returns false.
The input parameters of the call are similar to those of 1.
Example:

Script
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;
}
Script

Note: the specific 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) form, which means that in your own fn real
Now, 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.

Let's take a look at some specific examples.

$ ("# Submit"). click (function (){
Try {
$ ('# LeftTbl tr'). each (function (I ){
Var emailInput = $ ("# email _" + (1 + I ));
If (! Re. test (emailInput. val ())){
Alert ("Please enter email correctly ");
EmailInput. focus ();
Throw emailInput;
} Else {
Email = emailInput. val ();
}
});
} Catch (e ){
Return false;
}
$ ("# Pageform"). submit ();
});

It is implemented through throw and catch, and the counter can be used to determine its value at the end!

Then, you can understand the relationship between break and continue in each by looking at the code below.
Code:

$ ('Input'). each (function (){
If ($ (this). val () = ''){
// Do something
If (1 = 1) return false; // use return false to exit the loop.
Else return true; // use return true to enter the next loop.
}
});

After each element is iterated in jquery, check the returned value to determine whether to continue iteration of the next element.
Code:

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

I hope you will have an in-depth understanding of the usage of each in jquery.
Script school. I wish you all the learning progress.