Detailed explanation of how to use jQuery.each() function

The

each() function is used to traverse and execute the specified function using each element matched by the current jQuery object as the context.

The so-called context means that the this pointer inside the function refers to the element.

This function belongs to the jQuery object (instance). Note that this is different from the each() function of the global jQuery object.

Syntax

jQuery

Object.each(callback)

Parameters

Parameters

Description

callback Function specified by Function type for loop execution.

each() function will loop and call the function callback based on each matched element. Each time the function callback is called, the each() function will point the this reference inside the callback function to the element currently being iterated and pass in two parameters. The first parameter is the

index value of the current iterated element in the matched element (counting from 0), and the second parameter is the current iterated element (the same reference as this).

Theeach() function will also determine subsequent actions based on the return value of each function callback call. If the return value is false, the loop stops (equivalent to break in a normal loop); if any other value is returned, it means continuing to execute the next loop.

Return value

The return value of each() method is of jQuery type, returning the current jQuery object itself.

Example & Description

Take the following HTML code as an example:

<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>  
</div>
<form id="demoForm">
    <input name="goods_weight" type="checkbox" value="20">A(20kg)<br>
    <input name="goods_weight" type="checkbox" value="33">B(33kg)<br>
    <input name="goods_weight" type="checkbox" value="36">C(36kg)<br>
    <input name="goods_weight" type="checkbox" value="49">D(49kg)<br>
    <input name="goods_weight" type="checkbox" value="56">E(56kg)<br>
    <input name="goods_weight" type="checkbox" value="78">F(78kg)<br>
    <input id="btnBuy" type="button" value="订购">    
</form>

Now, we will change the innerHTML of all

elements to "number n" (n is 1, 2, 3...).

$("ul li").each(function(index, element){
    // this === element
    $(element).html( "编号" + (index + 1) );  
});

Next, we register the click event of the [Order] button

, which is used to process product ordering. It is required that the weight of each product ordered shall not exceed 100kg, otherwise the order cannot be made and the corresponding information will be prompted. .

$("#btnBuy").click(function(){
    var weight = 0;
    $("[name=goods_weight]:checked").each(function(){
        weight += parseInt(this.value);
        if(weight > 100){ // 重量超标，停止循环
            return false;
        }
    });
    if(weight <= 0){
        alert("没有选择任何商品!");
    }else if(weight > 100){
        alert("一次订购的商品重量不能超过100kg!");
    }else{
        // 订购商品
        alert("订购商品成功!");
    }
});

The above is the detailed content of Detailed explanation of how to use jQuery.each() function. For more information, please follow other related articles on the PHP Chinese website!