The usage of each () in JQuery, jqueryeach

The usage of each () in JQuery, jqueryeach

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:

Copy the Code 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:

Copy the Code as follows:
<Button> Change colors </button>
<Span> </span>
<Div> </div>
<Div> </div>
<Div> </div>
<Div> </div>
<Div id = "stop"> Stop here </div>
<Div> </div>
<Div> </div>
<Div> </div>

JQuery code:

Copy the Code as follows:
$ ("Button"). click (function (){
$ ("Div"). each (function (index, domEle ){
((Domeleapps.css ("backgroundColor", "wheat ");
If ($ (this). is ("# stop ")){
$ ("Span"). text ("stops where the div block is #" + index +. ");
Return false;
}
});

Or write as follows:

Copy the Code as follows:
$ ("Button"). click (function (){
$ ("Div"). each (function (index ){
Certificate (this).css ("backgroundColor", "wheat ");
If ($ (this). is ("# stop ")){
$ ("Span"). text ("stops where the div 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:

Copy the Code 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.

Copy the Code 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.

Copy the Code 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 ').