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