jQuery.each() 函數使用方法詳解

each()函數用於以目前jQuery物件匹配到的每個元素作為上下文來遍歷執行指定的函數。

所謂的上下文，意即該函數內部的this指標引用了該元素。

此函數屬於jQuery物件(實例)。請注意，這與全域jQuery物件的each()函數不同。

語法

jQueryObject.each( callback )

參數

##參數

##描述

callback    Function類型指定的用於循環執行的函數。    

each()函數將根據符合的每一個元素循環呼叫函數callback。每次呼叫函數callback時，each()函數都會將callback函數內部的this參考指向目前正在迭代的元素，並為其傳入兩個參數。第一個參數是當前迭代元素在匹配到的元素中的

索引

值(從0開始計數)，第二個參數是當前迭代元素(與this的引用相同)。 each()函數也會根據每次呼叫函數callback的回傳值來決定後續動作。如果傳回值為false，則停止迴圈(相當於普通迴圈中的break)；如果傳回其他任何值，均表示繼續下一個迴圈。

傳回值

each()方法的傳回值為jQuery類型，傳回目前jQuery物件本身。

範例&說明

以下面這段HTML程式碼為例：

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

現在，我們將所有的

元素的innerHTML改為"編號n" (n為1、2、3……)。

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

接著，我們註冊【訂購】按鈕的點擊

事件

，用於處理商品訂購事務，要求每次訂購的商品重量不得超過100kg，否則無法訂購並提示相應信息。

$("#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("订购商品成功!");
    }
});

以上是jQuery.each() 函數使用方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！