最近项目被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. iOS Block学习

    iOS4已经直接支持blocks,很有必要学习一下. 在ios中,将blocks当成对象来处理,它封装了一段代码,这段代码可以在任何时候执行.Blocks可以作为函数参数或者函数的返回值,而其 本身又 ...

  2. 安装ftp服务器

    Linux安装ftp组件 1  安装vsftpd组件 安装完后,有/etc/vsftpd/vsftpd.conf文件,是vsftp的配置文件. [root@bogon ~]# yum -y insta ...

  3. Solidworks如何绘制文字

    1 新建草图,并点击工具-草图绘制实体,文本   2 在弹出的窗口中输入文字,并设置文字的字体和样式   3 画好之后效果如下图所示   4 使用拉伸或者拉升切除来得到凸面的文字或者凹面的文字.   ...

  4. XSS学习分支图

    转载请注明出处:http://blog.csdn.net/cym492224103 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2 ...

  5. weex 项目 创建 远程 icon

    一.创建 远程 icon 步骤一:打开  阿里巴巴矢量图标库 官网:http://www.iconfont.cn/ 步骤二:选择项目需要的 icon 步骤三:添加到项目(没有项目会自动创建) 步骤四: ...

  6. ios NSAttributedString 具体解释

    ios NSAttributedString 具体解释 NSAttributedString能够让我们使一个字符串显示的多样化,可是眼下到iOS 5为止,好像对它支持的不是非常好,由于显示起来不太方便 ...

  7. OpenStack源码系列---neutron-server

    在看过了nova模块的源码之后,再去看OpenStack其它模块的源码会轻松很多,因为框架也是大同小异的.自四月份开通博客写了几篇文章后,真心觉得写篇技术文章如果要把前前后后牵扯到的其它技术内容都做介 ...

  8. easyUI datagrid组件能否有display:none的隐藏效果

    这个项目用了JQ easyUI datagrid 组件,我今天做了一个页面,页面有个div层,div里放了一个easyUI datagrid,页面初始化时div隐藏(display:none),通过点 ...

  9. TestNG demo

    下载TestNG的归档文件 下载最新版本的TestNG的jar文件,详细请点击访问 http://www.testng.org..在写这篇教程的时候,我下载TestNG中-6.8.jar,并将 tes ...

  10. ViewGroup如何分发事件

    dispatchTouchEvent事件派发显示隧道方式.再是冒泡方式隧道方式传递,直道某一个元素消耗此事件,由上至下逐层分发视图.冒泡方式传递,当某个视图消耗事件后其return boolean 是 ...