How to use each () in JQuery _ jquery

For jQuery objects, the each method is simply delegated: The jQuery object is passed to jQuery's each method as the first parameter. in other words, the each method provided by jQuery calls each () One by one for all the child elements of the object provided by parameter 1 () A function is a tool-class function provided by almost all frameworks. Through it, You can traverse and process the attribute values of objects and arrays. This method is implemented by jQuery and jQuery objects. For jQuery objects, the each method is simply delegated: 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 of the jQuery internal part one by one.

The effect of the each function based on the parameter type is different:

1. Traverse objects (with additional parameters)

The Code is as follows:

$. Each (Object, function (p1, p2 ){
This; // this indicates the current attribute value of the Object in each traversal.
P1; p2; // additional access parameters
}, ['Parameter 1', 'parameter 2']);

2. traverse the Array (with attachment parameters)

The Code is as follows:

$. Each (Array, function (p1, p2 ){
This; // this indicates the current element of the Array in each traversal.
P1; p2; // additional access parameters
}, ['Parameter 1', 'parameter 2']);

3. Traverse objects (no additional parameters)

The Code is as follows:

$. Each (Object, function (name, value ){
This; // this indicates the value of the current property.
Name; // name indicates the name of the current property of the Object.
Value; // value indicates the value of the current property of the Object.
});

4. traverse the Array (no additional parameters)

The Code is as follows:

$. Each (Array, function (I, value ){
This; // this points to the current element
I; // I indicates the current subscript of Array
Value; // value indicates the current element of the Array.
});

The following describes some common usage of jQuery's each method.

Var arr = ["one", "two", "three", "four"]; $. each (arr, function () {alert (this) ;}); // The above each Outputs 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. // 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 more powerful, can loop every attribute // The output result is: 1 2 3 4

The each function in JQuery is described in the official document 1.3.2 as follows:

Each (callback)

Execute a function using each matching element as the context.

This means that each time the passed function is executed, the this keyword in the function points to a different DOM element (each time it is a different matching element ). In addition, each time a function is executed, a numeric value indicating the position of the element used as the execution environment in the matched element set is passed to the function as the parameter (an integer starting from scratch ). If 'false' is returned, the loop is stopped (just like using 'Break' in a normal loop '). Return 'true' to jump to the next loop (just like using 'contine' in a normal loop ').

The subsequent callback is a callback function that indicates the operation that should be granted when elements are traversed. Let's take a look at the following simple example:
Iterate two images and set their src attributes. Note: this indicates a DOM object instead of a jQuery object.

HTML code:

The Code is as follows:

JQuery code:
$ ("Img"). each (function (I ){
This. src = "test" + I + ". jpg ";
});

Result: [,]
Of course, jquery allows custom jumps when traversing elements. See the sample code: You can use 'Return 'to jump out of the each () loop in advance.
HTML code:

The Code is as follows:

Change colors

Stop here

JQuery code:

The Code is as follows:

$ ("Button"). click (function (){
$ ("P"). each (function (index, domEle ){
((Domeleapps.css ("backgroundColor", "wheat ");
If ($ (this). is ("# stop ")){
$ ("Span"). text ("stop where the p block is #" + index +. ");
Return false;
}
});

Or write as follows:

The Code is as follows:

$ ("Button"). click (function (){
$ ("P"). each (function (index ){
Certificate (this).css ("backgroundColor", "wheat ");
If ($ (this). is ("# stop ")){
$ ("Span"). text ("stop where the p block is #" + index +. ");
Return false;
}
});

Illustration:


The each () method specifies the function to be run for each matching element.

Tip: false is returned to stop the loop as soon as possible.
Syntax
$ (Selector). each (function (index, element) parameter description
Function (index, element) is required. Specifies the function to be run for each matching element.
• Index-the index position of the selector
• Element-Current element (you can also use the "this" Selector

Instance
Output the text of each li element:

The Code is as follows:

$ ("Button"). click (function (){
$ ("Li"). each (function (){
Alert ($ (this). text ())
});
});

Instance
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.

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

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.

How can I jump out of each?
Jquery makes it easier to use each to traverse the selected object. There is an application that jumps out of this loop after finding the qualified object.
In general, break is used for javascript jump loops.
When my colleagues encountered this problem, they subconsciously used break and wanted to jump out of this cycle. Result Error
SyntaxError: unlabeled break must be inside loop or switch
After investigation,
Return false in the callback function. This applies to most jq methods.

The Code is as follows:

If 'false' is returned, the loop is stopped (just like using 'Break' in a normal loop ').
Return 'true' to jump to the next loop (just like using 'contine' in a normal loop ').