Detailed explanation of usage examples of each() in JQuery

For jQuery objects, the each method is simply delegated: the jQuery object is passed as the first parameter to jQuery's each method. In other words: the each method provided by jQuery is for the object provided by parameter one. All child elements in the method call one by one

each(callback)

Use each matching element as the context to execute a function.

means that every time the function passed in is executed, the this keyword in the function points to a different DOM element (a different matching element each time). Moreover, every time the function is executed, a numeric value representing the position of the element as the execution environment in the set of matching elements is passed to the function as a parameter (an integer starting from zero). Returning 'false' will stop the loop (just like using 'break' in a normal loop). Return 'true' to jump to the next loop (just like using 'continue' in a normal loop).

The following callback is the callback function, which indicates the operation that should be given when traversing the elements. Let’s look at a simple example below:
Iterate over two images and set their src attributes. Note: here this refers to the DOM object rather than the jQuery object.

HTML code:

jQuery code:
$("img").each(function( i){
this.src = "test" + i + ".jpg";
});

Result:[ , ]
Of course, jquery allows customized jumps when traversing elements. Please see the sample code: you can use 'return' to jump out of each() in advance. cycle.
HTML code:

The code is as follows:

Change colors

< ;p>

Stop here

jQuery code:

The code is as follows:

$("button").click(function(){
$("p" ).each(function(index,domEle){
$(domEle).css("backgroundColor","wheat");
if($(this).is(" #stop")){
$("span").text("Stop where p block is #"+index+".");
return false;
}
}) ;

Or write like this:

The code is as follows:

$("button").click(function() {
$("p").each(function(index){
$(this).css("backgroundColor","wheat");
if($(this).is(" #stop")){
$("span").text("Stop where p block is #"+index+".");
return false;
}
}) ;

Illustration:


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

Tip: return false is available. Stop the loop early.
Syntax
$(selector).each(function(index,element))Parameter Description
function(index,element) Required.
•index - the index position of the selector
•element - the current element (you can also use the "this" selector

Example
Output the text of each li element:

The code is as follows:

$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});

Instance
obj object is not an array
The biggest difference between this method and 1 is that the fn method will be executed one after another without considering the return value. In other words, all properties of the obj object will be called by the fn method, even if the fn function returns false. The parameters passed in the call are similar to 1.

code show as below:

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

It is important to note that the specific calling method of fn in each method is not simple fn(i, val) or fn(args), but fn.call(val,i,val) or fn. The form of apply(obj.args) means that in your own implementation of fn, you can directly use this pointer to refer to the sub-elements of the array or object.

How to jump out of each?
It is more convenient to use each when jquery traverses the selected object. There is an application that needs to break out of this loop after finding an object that meets the conditions.
javascriptTo break out of a loop, break is generally used.
When a colleague encountered this problem, he subconsciously used break to get out of the loop. The result is an error
SyntaxError: unlabeled break must be inside loop or switch
After investigation, you should use a
return false in the callback function. Most jq methods are like this
The code is as follows:

Returning 'false' will stop the loop (just like using 'break' in a normal loop).
Return 'true' to jump to the next loop (just like using 'continue' in a normal loop).

The above is the detailed content of Detailed explanation of usage examples of each() in JQuery. For more information, please follow other related articles on the PHP Chinese website!