Example tutorial of each implementation in jQuery

For the jquery object, 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 sub-elements in the method are called one by one.

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

each(callback)

With each A matching element serves as context to perform a function.

means that each 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). Returns 'true' to jump to the next loop (just like using 'continue' in a normal loop).

The following callback is the callback function, indicating the operation that should be given when traversing the elements. Let's start with a simple example below:
Iterate over two images and set their src attribute. Note: here this refers to the DOM object rather than the jQuery object.

html Code:

<img  src="/static/imghw/default1.png"  data-src="test0.jpg"  class="lazy" / alt="Example tutorial of each implementation in jQuery" ><img  src="/static/imghw/default1.png"  data-src="test0.jpg"  class="lazy" / alt="Example tutorial of each implementation in jQuery" >jQuery 代码:
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});

Result:[ , ]

Of course, jquery allows custom pop-ups when traversing elements. Please see the sample code: You can use 'return' to break out of each() loop early.

HTML code:

<button>Change colors</button>
<span></span>
<p></p>
<p></p>
<p></p>
<p></p>
<p id="stop">Stop here</p>
<p></p>
<p></p>
<p></p>

jQuery code:

$("button").click(function(){
$("p").each(function(index,domEle){
$(domEle).css("backgroundColor","wheat");
if($(this).is("#stop")){
$("span").text("在p块为#"+index+"的地方停止。");
return false;
}
});

Or write:

$("button").click(function(){
$("p").each(function(index){
$(this).css("backgroundColor","wheat");
if($(this).is("#stop")){
$("span").text("在p块为#"+index+"的地方停止。");
return false;
}
});

Illustration:

## The #each() method specifies a function to run for each matching element.

Tip: Returning false can be used to stop the loop early.

Syntax

$(selector).each(function(index,element))Parameter Description
function(index,element) Required. Specifies the function to run for each matching element.
•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:

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

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

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 pay special attention to the specific calling method of fn in the each method. Instead of using simple fn(i,val) or fn(args), it uses the form of fn.call(val,i,val) or fn.apply(obj.args), which means that in your own In the implementation of fn, you can directly use this pointer to reference 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. The first application is to break out of the loop after finding the object that meets the conditions.

javascript

Generally use break.Colleagues encountered this problem and subconsciously. I used break and wanted to get out of the loop. The result was an error: SyntaxError: unlabeled break must be inside loop or switch

After investigation, I should use a return false in the callback function. This is the case for most jq methods. of

The above is the detailed content of Example tutorial of each implementation in jQuery. For more information, please follow other related articles on the PHP Chinese website!