最近项目被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. android 获得SDCard信息

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...

  2. Go -- 实现二叉搜索树

    树: https://suanfa.herokuapp.com/3%E6%A0%91/binarytree/ 数据结构 首先我们定义需要的数据结构.注意,TreeNode的左右节点都是*TreeNod ...

  3. jQuery.ajax()方法中參数具体解析

    前言 在项目开发中,为了实现异步向服务端发起请求,最常常使用的就是jQuery.ajax方法了.刚開始需求比較简单,调用jQuery.ajax方法时要传的參数也就那几个常见的參数:url/data/d ...

  4. Classification and logistic regression

    logistic 回归 1.问题: 在上面讨论回归问题时.讨论的结果都是连续类型.但假设要求做分类呢?即讨论结果为离散型的值. 2.解答: 假设: 当中: g(z)的图形例如以下: 由此可知:当hθ( ...

  5. IOS自己主动布局中的浮动布局(6)----MyFloatLayout横空出世

    https://github.com/youngsoft/MyLinearLayout 前言 在MyLayout的6大布局中,每种布局都有不同的应用场景. 且每种布局的子视图的约束机制不一样:线性布局 ...

  6. 【C语言天天练（九）】动态内存分配

    引言:数组的元素存储于内存中连续的位置上.当一个数组被声明时.它所须要的内存在编译时就被分配. 可是,我们能够使用动态内存分配在执行时为它分配内存. 一块内存的生命周期能够分为四个阶段:分配.初始化. ...

  7. 利用卷积神经网络（CNN）构造社区问答系统

    /* 版权声明:能够随意转载,转载时请标明文章原始出处和作者信息 .*/                                                     author: 张俊林 ...

  8. 浅谈MySQL压缩协议细节--从源码层面

    压缩协议属于mysql通讯协议的一部分,要启用压缩协议传输功能,前提条件客户端和服务端都必须要支持zlib算法,那么,现在有个问题,假如服务端已经默认开启压缩功能,那原生客户端在连接的时候要如何才可启 ...

  9. mac系统下为emacs设置中文字体,解决乱码问题

    近期换了个系统,如今用mac系统. 当打开emacs后,中文支持的不是非常好.有的地方能显示.在.el文件的凝视里显示为口口口口口口口口这种框.例如以下图所看到的 找了半天.是由于中文字体的问题.仅仅 ...

  10. List 调用 remove 方法时抛出 java.lang.UnsupportedOperationException 异常原因

    原因 使用 Arrays.asList(arr) 转换的 List 并不能进行 add 和 remove 操作.       Arrays.asList(arr) 返回的类型是 Aarrays$Arr ...