最近项目被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. Solidworks打印工程图超出范围了怎么办

    打印预览,边框部分无法显示   页面设置,比例改为90%,试一下   正常了,如果你还是无法正常显示,就再改小比例

  2. 1.shell编程之变量的高级用法

    1.1.变量替换 变量替换的六种形式 实例:非贪婪和贪婪的区别 从头部删除 [root@VM_0_9_centos shell_learn]# var_1="i love you,do yo ...

  3. ubuntu如何修改root密码

    安装完Ubuntu后忽然意识到没有设置root密码,不知道密码自然就无法进入根用户下.到网上搜了一下,原来是这麽回事.Ubuntu的默认root密码是随机的,即每次开机都有一个新的root密码.我们可 ...

  4. 【转】DevOps原则

    DevOps的出现有其必然性.在软件开发生命周期中,遇到了两次瓶颈. 第一次瓶颈是在需求阶段和开发阶段之间,针对不断变化的需求,对软件开发者提出了高要求,后来出现了敏捷方法论,强调适应需求.快速迭代. ...

  5. 2016/05/27 php上传文件常见问题总结

    php上传文件常见问题总结 投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2015-02-03我要评论 这篇文章主要介绍了php上传文件常见问题总结,基本上经常碰到的问题的处理都列了 ...

  6. Hashed Indexes Geospatial Index

    Indexes — MongoDB Manual https://docs.mongodb.com/manual/indexes/ 地理索引 哈希索引

  7. poj 2559 Largest Rectangle in a Histogram 栈

    // poj 2559 Largest Rectangle in a Histogram 栈 // // n个矩形排在一块,不同的高度,让你求最大的矩形的面积(矩形紧挨在一起) // // 这道题用的 ...

  8. (27) java web的struts2框架的使用-基于表单的多文件上传

    和单个文件上传配置都是一样的,只是在action中接受参数时候,接受的是数组,不再是单个的文件. 一,action的实现: public class MutableFilesUpload extend ...

  9. javascript中基本类型和引用类型的区别分析

    大多数人系统学习过的程序设计语言,在这些语言的学习过程中最早学到的几个要点之一就是值类型和引用类型的区别.下面我们来看一下在 JavaScript 中基本数据类型(Primitive Types)和引 ...

  10. codeforces 435 B. Pasha Maximizes 解题报告

    题目链接:http://codeforces.com/problemset/problem/435/B 题目意思:给出一个最多为18位的数,可以通过对相邻两个数字进行交换,最多交换 k 次,问交换 k ...