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

jquery之---$.each详细的更多相关文章

  1. jquery.cookie用法详细解析,封装的操作cookie的库有jquery.cookie.js

    jquery.cookie用法详细解析 需要注意存入cookie前,对数据进行序列化, 得到后在反序列化: 熟练运用:JSON.stringify();和JSON.parse(): 通常分为如下几个步 ...

  2. (三)Jquery Mobile按钮详细讲解

    Jquery Mobile按钮详细讲解 一.JM按钮说明 按钮如下图所示           1.HTML5中的button      效果:      2. JM中的普通button        ...

  3. JQuery中Ajax详细参数使用案例

    JQuery中Ajax详细参数使用案例 参考文档:http://www.jb51.net/shouce/jquery1.82/ 参考文档:http://jquery.cuishifeng.cn/jQu ...

  4. jquery.cookie用法详细解析

    本篇文章主要是对jquery.cookie的用法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 Cookie是由服务器端生成,发送给User-Agent(一般是浏览器),浏览器会将 ...

  5. Dom对象和JQuery对象的详细介绍及其区别

    一直搞不清Dom对象和JQuery对象之间的区别,今天好好总结下 1.dom对象(摘抄自百度百科http://baike.baidu.com/link?url=4L8bZ7kW6kE-it4F-1LU ...

  6. 树型权限管理插件:jQuery Tree Multiselect详细使用指南

    1.认识jQuery Tree Multiselect 这个插件允许用户以树型的形式来呈现列表复选框的选择.多用于权限管理中用于分配不同的权限.使用文档,请参考:     https://github ...

  7. jquery datatable的详细用法

    1,首先需要引用下面两个文件 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css ...

  8. WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping 异常详细信息: System.InvalidOperationException: WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping。请添加一个名为 jquery (区分大小写)的

    WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping.请添加一个名为 jquery (区分大小写)的 ScriptRes ...

  9. jquery的each()详细介绍

    each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, JSON 等等在javaScript开发过程中使用$ ...

  10. jquery.form.js详细讲解

    现在大家在在表单提交的时候都不流行中间页面做跳转(比如发布成功的提示页面),或者说这样做会降低用户体验.所以一般都是采用ajax来提交,能看到这个页面的朋友,想必对ajax提交表单已经是很熟悉了. 如 ...

随机推荐

  1. Maven的目录结构和常用命令

    一.Maven项目的目录结构  1.顶级目录结构   src:该目录主要存放的是项目的源代码文件. target:该目录是项目编译后产生的一个目录,主要存放的是编译后的.class文件. pom.xm ...

  2. ES6展开运算符(...)

    数组字面量中使用展开运算符 我们可以这样合并数组: var arr1=['a','b','c']; var arr2=[...arr1,'d','e']; //['a','b','c','d','e' ...

  3. javah找不到类文件

    这样即可,在src目录下寻找类,类要写全,即包名.类名

  4. 【转】WEB安全之渗透测试流程

    熟悉渗透流程,攻击会像摆积木一样简单! 0x 01:信息收集 收集网站信息对渗透测试非常重要,收集到的信息往往会让你在渗透中获得意外惊喜. 1. 网站结构 可以使用扫描工具扫描目录,主要扫出网站管理员 ...

  5. centos 中输入ifconfig 只有lo 没有eth0

    问题描述:linux中输入ifconfig命令,只有lo,没有eth0 解决方法: 1.进入/etc/sysconfig/network-scripts 目录,发现有ifcfg-eth0,即网卡(驱动 ...

  6. 面向对象 OOP中的抽象类,接口以及多态

    [抽象类与抽象方法] 1.什么是抽象方法? 没有方法体{}的方法,必须使用abstract关键字修饰,这样的方法,我们称之为抽象方法. abstract function say() 2.什么是抽象类 ...

  7. HTTP 错误 404.11 - Not Found 请求筛选模块被配置为拒绝包含双重转义序列的请求。

    一些URL中可能会包含+号等符号,然后IIS7以上的版本会默认拒绝请求此URL,需要进行如下的修改. <configuration> <system.webServer> &l ...

  8. [javaEE] 三层架构案例-用户模块(一)

    用户注册登录注销 Servlet+JSP+javaBean+dom4j 分层结构: com.tsh.web com.tsh.service com.tsh.dao com.tsh.domain com ...

  9. Windbg 脚本命令简介 一

    Windbg  脚本命令简介 一 Windbg command r: registers的简写,可以显示或修改寄存器的值.浮点寄存器的值.定义别名变量. 可以显示当前线程下的寄存器值. The r c ...

  10. python模块之contexlib

    一.上下文管理器 with是python实现上下文管理器的核心关键词.它能够在代码执行前和执行后做一些额外的事情. 最常见的代码恐怕就是文件操作了. with open("file" ...