Detailed explanation of usage examples of each method in jquery object

In the jQuery object, the each method is simply delegated: pass the jQuery object as the first parameter to jQuery's each method. In other words: the each method provided by jQuery is to call the method one by one on all the sub-elements of the object provided by parameter 1. The each() function is a tool function provided by basically all frameworks. Through it, you You can traverse the attribute values ​​of objects and arrays and process them. Both jQuery and jQuery objects implement this method. 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 All sub-elements in the object provided by parameter 1 are called one by one. The each method provided by the jQuery object calls the sub-elements inside jQuery one by one.

The effect of each function is not completely consistent depending on the type of parameters:

1. Traverse the object (with additional parameters)

$.each(Object, function(p1, p2) {    
   this;       //这里的this指向每次遍历中Object的当前属性值
  p1; p2;     //访问附加参数
}, ['参数1', '参数2']);

2. Traverse the array(With attachment parameters)

The code is as follows:

$.each(Array, function(p1, p2){    
  this;       //这里的this指向每次遍历中Array的当前元素
  p1; p2;     //访问附加参数
}, ['参数1', '参数2']);

3. Traverse the object (no additional parameters)

The code is as follows:

$.each(Object, function(name, value) {     
       this;      //this指向当前属性的值
     name;      //name表示Object当前属性的名称
     value;     //value表示Object当前属性的值});

4.Traverse Array (no additional parameters)

The code is as follows:

$.each(Array, function(i, value) {     
      this;      //this指向当前元素
     i;         //i表示Array当前下标
     value;     //value表示Array当前元素});

Here are some common uses of jQuery's each method:

each(callback)
With Each matching element serves as a 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.

<img></img/>
$("img").each(function(i){ 
this.src = "test" + i + ".jpg"; 
}); 
结果:[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]

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

The code is 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:

The code is as follows:

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

each() The method specifies the function to be 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

obj object is not an array
The biggest difference between this method and 1 is : The fn method will be executed one by one regardless of 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.

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 should be noted 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.apply (obj.args), which means that in your own fn implementation, you can directly use this pointer to reference the sub-elements of the array or object

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