Introduction to the usage of each() in JQuery

Instructions for using each() in JQuery

For jQuery objects, 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 calls the method one by one on all the sub-elements of the object provided by parameter 1. The each() function is basically all The frameworks all provide a tool class function through which 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)

The code is as follows:

$.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 objects (no additional parameters)

The code is as follows:

##

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

4. Traverse the 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

##

 arr = ["one", "two", "three", "four" arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 90 obj = {one: 1, two: 2, three: 3, four: 4

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

each(callback)

Execute a function with each matching element as the context.

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). 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 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  src="/static/imghwm/default1.png" data-src="test0.jpg" class="lazy" alt="Introduction to the usage of each() in JQuery" >/>$("img").each(function(i){ 
this.src = "test" + i + ".jpg"; 
}); 

结果:[ <img  src="/static/imghwm/default1.png" data-src="test0.jpg" class="lazy" alt="Introduction to the usage of each() in JQuery" >, <img  src="/static/imghwm/default1.png" data-src="test1.jpg" class="lazy" alt="Introduction to the usage of each() in JQuery" > ]

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

HTML code:

The code is as follows:

##

<button>Change colors</button><span></span><p></p><p></p><p></p><p></p><p>Stop here</p><p></p><p></p><p></p>

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("在p块为#" + index + "的地方停止。");            return false;
        }
    })
}

Or write like this:

Code As follows:

##

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

Illustration:

#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:


code show as below:

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

实例 
obj 对象不是数组 
该方法同1的最大区别是：fn方法会被逐次不考虑返回值的进行进行。换句话说，obj对象的所有属性都会被fn方法进行调用，即使fn函数返回false。调用传入的参数同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 <p> </p><p>需要特别注意的是each方法中fn的具体调用方法并不是采用简单的fn(i,val)或fn(args),而是采用了fn.call(val,i,val)或fn.apply(obj.args)的形式，这意味着，在你自己的fn的实现中，可以直接采用this指针引用数组或是对象的子元素。 <br><br><strong>那怎么跳出each呢</strong> <br>jquery再遍历选定的对象时候用each比较方便。有种应用是找到里面符合条件的对象后，要跳出这个循环。<br><a href="http://www.php.cn/wiki/48.html" target="_blank">javascript</a>的跳出循环一般用break. <br>同事遇到这个问题，下意识 的用了break，想跳出这个循环。结果报错 <br>SyntaxError: unlabeled break must be inside loop or switch <br>经查，应该用一个 <br>在回调函数里return false即可，大多数jq的方法都是如此的 <br></p><p class="codetitle">代码如下:</p><p class="codebody"><br>返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。 <br>返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。 </p><p> </p>

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