最近项目被each函数坑惨了，想来还是好好整理下关于each函数的方方面面，一来方便自己查阅，二来为读者提供经验和教训，废话不多说，来看看Each函数到底是怎么坑人的。

一. 全局jQuery.each() 函数详解

　　所谓全局jQuery.each()函数也即是指$.each()函数，它可以用来遍历任何一个集合，不管是一个JavaScript对象或者是一个数组，或者是一个JSon对象。它的基本语法如下：

$.each(collection, callback(indexInArray, valueOfElement) )

collection可以是数组，可以是任何一个JS对象或者JSON对象，callback我们称之为回掉函数；如果是一个数组的话，回调函数每次传递一个数组的下标和这个下标所对应的数组的值；callback回调函数用于遍历指定的对象和数组，并以对象的每个属性(或数组的每个成员)作为上下文来遍历执行指定的函数。
我们来看下面的几个例子大家就明白了：

【001】each函数处理一维数组

var arr1 = [ "aaa", "bbb", "ccc" ];

  $.each(arr1, function(i,val){

      console.log(i);

     console.log(val);

  }); 
这里遍历的是数组，所以i为数组的索引，从0开始，val表示索引对应的数组中的值，回掉函数做的仅仅是使用alert弹出了数组的索引和值

上面函数的运行效果如下：

【002】each函数遍历二维数组

　var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]

　　$.each(arr2, function(i, item){

      console.log(i);

      console.log(item);

　　});

相比于上面的第一个例子，此时的collections是一个二维数组，按照前面所说的，那么这里的i为二维数组的索引，item为索引对应的元素，即每个一维数组，运行效果如下所示：

现在我有个需求，想将一维数组里面的元素全部都遍历出来，怎么做？只需要在each函数里面再嵌套一层函数即可：

 $.each(arr2, function(i, item){

      　　$.each(item,function(j,val){

       　　　　  console.log(j);

                console.log(val);

    　});

});

【003】使用each函数遍历对象属性

// 遍历对象属性

$.each( { name: "张三", age:  } , function(property, value){

    alert("属性名=" + property + "; 属性值=" + value);

} );

此时function中的property相当于相当于对象的属性名name和age,而value就是属性对应的值，这里是一个json对象,再来看一个相似的例子：

 var obj = { one:, two:, three:};

 $.each(obj, function(key, val) {

      console.log(key);

      console.log(val);

 });

运行效果如下所示：

【004】jQuery.each()函数同样可以遍历jQuery对象中匹配的元素，以下面这段HTML代码为例，新建一个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="">A(20kg)<br>

    <input name="goods_weight" type="checkbox" value="">B(33kg)<br>

    <input name="goods_weight" type="checkbox" value="">C(36kg)<br>

    <input name="goods_weight" type="checkbox" value="">D(49kg)<br>

    <input name="goods_weight" type="checkbox" value="">E(56kg)<br>

    <input name="goods_weight" type="checkbox" value="">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

    $(this).html( "编号" + (index + ) );

});

如下所示，结果都变了：

接着，我们注册【订购】按钮的点击事件，用于处理商品订购事务，要求每次订购的商品重量不得超过100kg，否则无法订购并提示相应信息:

$("#btn").click(function(){

    var weight = ;

    $.each( $("[name=goods_weight]:checked"), function(){

        weight += parseInt(this.value);

        if(weight > ){

            return false;

        }

    });

    if(weight <= ){

        alert("没有选择任何商品!");

    }else if(weight > ){

        alert("一次订购的商品重量不能超过100kg!");

    }else{

        // 订购商品

        alert("订购商品成功!");

    }

});

【005】遍历Dom中的元素

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("li").each(function(){

      alert($(this).text())

    });

  });

});

</script>

</head>

<body>

<button>输出每个列表项的值</button>

<ul>

<li>Coffee</li>

<li>Milk</li>

<li>Soda</li>

</ul>

</body>

</html>

【006】再来看一个Json的例子：

var json = [

 { 'red': '#f00' },

 { 'green': '#0f0' },

 { 'blue': '#00f' }

];

遍历代码：

$.each(json, function () {
　　this表示数组中的每个json对象

   $.each(this, function (name, value) {

      console.log(name + '=' + value);

   });

});

运行效果如下：

【007】区别$().each()和$.each()/jQuery.each()

而$(Selector).each()遍历当前jQuery对象，并在每一个元素上执行回调函数，其语法格式如下所示：

$(selector).each(function(index,element))
通过Jquery选择器选中某个Jquery对象，然后遍历该Jquery对象，
index是对应数组或者对象的索引/属性，element表示索引或者属性对应的值，其使用方法和Jquery.each()函数类似。

两者之间最主要的区别在于：

在遍历DOM时，通常用$(selector).each(function(index,element))函数；
在遍历数据时，通常用$.each(dataresource,function(index,element))函数。

例如对于后台传递过来的数据通常是JSON格式的字符串，我们在前端对其进行反序列化成正常的JSon格式，然后操作，看如下的例子，我们使用$.each()函数进行操作：

后台传递过来的数据如下所示：

var jsonResourceList = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},' +

            '{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"}]';

我们想对这些数据进行处理，肯定需要循环遍历，如下：

if(jsonResourceList.length >){
　　　　　　　　# 红色的标注：反序列化为正常的JSon格式

            $.each(JSON.parse(jsonResourceList), function(index, obj) {

                alert(obj.tagName);

            });

        }

最终的运行效果如下所示：

如果一个html页面上面有很多个checkbox，这时用$().each来处理checkbox是比较不错的，看如下的例子：

$("input[type='checkbox']").each(function(i){

   $(this).attr("checked",true);

});

回调函数里面的i在此处代表input集合传递过去的索引(也就是正在遍历的input元素的索引)；上面的例子只是用到了input集合的索引，我们来看下面的例子，既用到了input集合的索引，又用到了input集合中的dom对象：

<head>

    <title></title>

    <script src="jquery-1.9.0.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $('input:hidden').each(function (index, obj) {

                alert(obj.name + "..." + obj.value);

            });

        });

    </script>

</head>

<body>

<input type="hidden" value="" name="a"/>

<input type="hidden" value="" name="b"/>

<input type="hidden" value="" name="c"/>

</body>

Jquery之each函数详解的更多相关文章

  1. jQuery.fn.extend() 函数详解

    jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法). jQuery.fn是jQuery的原型对象,其extend()方法用于为jQuery的原型 ...

  2. JQuery中on()函数详解

    JQuery API中定义的on方法,专业名词很多,读起来并不是那么容易,而对于开发人员知道函数怎么使用就可以了.本文将JQuery的说明翻译如下: on(events,[selector],[dat ...

  3. jQuery Event.stopPropagation() 函数详解

    stopPropagation()函数用于阻止当前事件在DOM树上冒泡. 根据DOM事件流机制,在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈元素上,如果这些祖辈元素上也绑定了相应的事件处理函 ...

  4. jQuery Event.stopImmediatePropagation() 函数详解

    stopImmediatePropagation()函数用于阻止剩余的事件处理函数的执行,并防止当前事件在DOM树上冒泡. 根据DOM事件流机制,在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈 ...

  5. jquery ajax error函数详解

    代码:$(document).ready(function() {            jQuery("#clearCac").click(function() {        ...

  6. jQuery.attr() 函数详解

    一,jQuery.attr()  函数详解: http://www.365mini.com/page/jquery-attr.htm 二,jQuery函数attr()和prop()的区别: http: ...

  7. jQuery.ready() 函数详解

    jQuery.ready() 函数详解 ready()函数用于在当前文档结构载入完毕后立即执行指定的函数. 该函数的作用相当于window.onload事件. 你可以多次调用该函数,从而绑定多个函数, ...

  8. jQuery的deferred对象详解 jquery回调函数

    http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html jQuery的 ...

  9. jquery inArray()函数详解

    jquery inarray()函数详解 jquery.inarray(value,array)确定第一个参数在数组中的位置(如果没有找到则返回 -1 ). determine the index o ...

随机推荐

  1. 【面试 struts2】【第三篇】struts2的问题

    1.struts2的工作流程 1>客户端浏览器发出HTTP请求. 2>根据web.xml配置,该请求被FilterDispatcher接收 3>根据struts.xml配置,找到需要 ...

  2. C#中值类型和引用类型的差别浅记

    C#中值类型和引用类型的差别浅记         在C#中,变量的类型分为两种.各自是值类型和引用类型.         值类型的变量直接存储值,说得更详细一些,就是值类型变量在内存中直接存储它们自身 ...

  3. Mac电脑解压文件unrar用密码问题解决

    下载了一个rar文件,有密码的,你懂的. 但是在mac上面,用unrar解压,只能解出空文件:用izip解压,直接停在那里不动. 只好上网搜索.找到了办法. 用brew 安装了命令行版本的 unrar ...

  4. BUPT复试专题—寻找第 K 小的数(2009)

    题目描述 给你 n 个完全不相同整数(n<=300),每一个数都大于 0 并且小于 1000,请找出 第 k 小的数. 输入 输入包括两行,第一行用空格隔开的两个数 n 和 k;第二行有 n 个 ...

  5. 上篇：es5、es6、es7中的异步写法

    本作品采用知识共享署名 4.0 国际许可协议进行许可.转载联系作者并保留声明头部与原文链接https://luzeshu.com/blog/es-async 本博客同步在http://www.cnbl ...

  6. a#x#i#o#s封装

    封装的js文件如下: /* 用于修改 axios 的一些公用配置,具体参看文档 */import axios from 'axios'import store from '@/store/index. ...

  7. Frame Relay - 简单介绍及基本配置

    Frame Relay如今越来越不流行了,只是在过去的设计中被广泛应用. 所以工作上还是能常常见到的, 这篇博文从二层简单总结下FR的一些概念 在介绍Frame Relay之前,先了解下广播介质和非广 ...

  8. Linux性能查看与分析--命令行工具介绍

    本文介绍工作中常用的几个linux性能查看命令:top,sar,vmstat,iostat,pidstat等. 1.top top是最常用的linux性能分析工具,它能够实时的显示系统中各个进程的资源 ...

  9. Android实现RecyclerView的下拉刷新和上拉载入很多其它

    需求 先上效果图, Material Design风格的下拉刷新和上拉载入很多其它. 源代码地址(欢迎star) https://github.com/studychen/SeeNewsV2 假设对于 ...

  10. PowerDesigner逆向工程，从SQL Server数据库生成Physical Model

    提前声明:这种方式貌似只能是Power Designer安装在数据库服务器的时候才可以,因为我按照成功的这个再去从本机逆向连接远程服务器的时候,一直提示:test failed......不讲了,尴尬 ...