jQuery.each() 函数使用方法详解-js教程-PHP中文网

jQuery.each() 函数使用方法详解

巴扎黑

发布： 2017-07-09 11:25:38

原创

1289人浏览过

each()函数用于以当前jquery对象匹配到的每个元素作为上下文来遍历执行指定的函数。

所谓的上下文，意即该函数内部的this指针引用了该元素。

该函数属于jQuery对象(实例)。请注意，这与全局jQuery对象的each()函数不同。

语法

jQueryObject.each( callback )

参数

描述

callback Function类型指定的用于循环执行的函数。

each()函数将根据匹配到的每一个元素循环调用函数callback。每次调用函数callback时，each()函数都会将callback函数内部的this引用指向当前正在迭代的元素，并为其传入两个参数。第一个参数是当前迭代元素在匹配到的元素中的索引值(从0开始计数)，第二个参数是当前迭代元素(与this的引用相同)。

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

查看详情

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() 函数使用方法详解的详细内容，更多请关注php中文网其它相关文章！