everest33

導航：

1，jQuery對象(實例)的each()函數

2，全局jQuery對象的each()函數

一：jQuery對象(實例)的each()函數

each()函數用于以當前jQuery對象匹配到的每個元素作為上下文來遍歷執行指定的函數。

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

該函數屬于jQuery對象(實例)。請注意，這與全局jQuery對象的each()函數不同。

語法

jQueryObject.each( callback )

參數

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>

現在，我們將所有的<li>元素的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()函數，$.each()【又叫jQuery.each()】   

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

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

該函數屬于全局jQuery對象。請注意，這與jQuery對象(實例)的each()函數不同。

語法

靜態函數jQuery.each()的語法如下：

jQuery.each( object, callback )

參數

參數object可以是對象或數組。如果是對象，則遍歷該對象的每個屬性；如果是數組，則遍歷該數組中的每個元素。

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

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

返回值

jQuery.each()方法的返回值為jQuery類型，返回當前jQuery對象本身。

示例&說明

使用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("訂購商品成功!");
    }
});