jquery之---$.each詳細

jQuery.each()函數用於遍歷指定的對象和數組，並以對象的每個屬性(或數組的每個成員)作為上下文來遍歷執行指定的函數。

 

• 語法

    靜態函數$.each()的語法如下：$.each( object, callback )：Object類型指定需要遍歷的對象或數組；Function類型指定的用於循環執行的函數。參數object可以是對象或數組。如果是對象，則遍歷該對象的每個屬性；如果是數組，則遍歷該數組中的每個元素。

    jQuery.each()函數將根據每個成員(對象的屬性或數組的元素)循環調用函數callback。每次調用函數callback時，jQuery.each()函數都會將callback函數內部的this引用指向當前正在迭代的成員，並為其傳入兩個參數。第一個參數是當前迭代成員在對象或數組中的索引值(從0開始計數)，第二個參數是當前迭代成員(與this的引用相同)。

   jQuery.each()函數還會根據每次調用函數callback的返回值來決定后續動作。如果返回值為false，則停止循環(相當於普通循環中的break)；如果返回其他任何值，均表示繼續執行下一個循環。 

• 實例

使用jQuery.each()函數迭代對象或數組，jQuery示例代碼如下： 

// 遍歷數組元素
$.each( [1, 2, 3] , function(i, item){
    alert("索引=" + i + "; 元素=" + item);  
} );
// 遍歷對象屬性
$.each( { name: "張三", age: 18 } , function(property, value){
    alert("屬性名=" + property + "; 屬性值=" + value);    
} );
var array = [];
array[2] = "Code";
array[4] = "Player";
// 會遍歷索引為0、1、2、3、4的元素，其中0、1、3的元素是undefined
$.each( array , function(i, item){
    alert("索引=" + i + "; 元素=" + item);  
} );

jQuery.each()函數同樣可以遍歷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>

現在，我們將所有的<li>元素的innerHTML改為"編號n"(n為1、2、3……)。

$.each( $("ul li"), function(index, element){
    // this === element
    $(element).html( "編號" + (index + 1) );  
});
接着，我們注冊【訂購】按鈕的點擊事件，用於處理商品訂購事務，要求每次訂購的商品重量不得超過100kg，否則無法訂購並提示相應信息。

$("#btn").click(function(){
    var weight = 0;
    $.each( $("[name=goods_weight]:checked"), function(){
        weight += parseInt(this.value);
        if(weight > 100){
            return false;
        }
    });
    if(weight <= 0){
        alert("沒有選擇任何商品!");
    }else if(weight > 100){
        alert("一次訂購的商品重量不能超過100kg!");
    }else{
        // 訂購商品
        alert("訂購商品成功!");
    }
});