最近项目被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. win7配置java环境变量

    http://jingyan.baidu.com/article/9f63fb91d87fb0c8400f0e93.html 安装JDK,从Oracel官方网站上下载,也可以通过搜索,进入链接.下载完 ...

  2. Scala学习笔记 & 一些不错的学习材料 & 函数编程的历史八卦

    参考这篇文章: http://www.ibm.com/developerworks/cn/java/j-lo-funinscala1/ 这也是一个系列 严格意义上的编程范式分为:命令式编程(Imper ...

  3. Coursera 机器学习Course Wiki Lecture Notes

    https://share.coursera.org/wiki/index.php/ML:Main 包含了每周的Lecture Notes,以便复习回顾的时候使用.

  4. SODBASE CEP学习（四）续：类SQL语言EPL与Storm或jStorm集成-使用分布式缓存

    流式计算在一些情况下会用到分布式缓存,从而实现(1)想把统计或计算结果保存在分布缓存中.供其他模块或其他系统调用. (2)某一滑动时间窗体上计数.比如实时统计1小时每一个Cookie的訪问量.实时统计 ...

  5. gulp配置 - PC

    初始化目录结构如下(图片看不清可以拖到桌面或者直接CTRL+鼠标滚轮进行观看) 开发环境示例: 上线环境示例: gulpfile.js(详解版) (2018-3-28)添加了scss处理(去除了les ...

  6. dvm进程，linux进程，应用程序进程是否同一概念

    Android 运行环境主要指的虚拟机技术——Dalvik.Android中的所有Java程序都是运行在Dalvik VM上的.Android上的每个程序都有自己的线程,DVM只执行.dex的Dalv ...

  7. 第04章-VTK基础（2）

    [译者:这个系列教程是以Kitware公司出版的<VTK User's Guide -11th edition>一书作的中文翻译(出版时间2010年,ISBN: 978-1-930934- ...

  8. Jenkins+appium+testng持续集成

    Create maven project in eclipseAdd Appium , Selenium dependancyAdd Test in TestNG testCreate TestNG ...

  9. php浏览次数累加代码

    <?php $count=0; if(file_exists("count.txt")) //判断是否存在count.txt文件 { $count=file_get_cont ...

  10. 宠物连连看2完整Android代码项目

    宠物连连看2完整代码,该源代码支持多种风格的连连看游戏的,如有国旗类的连连看,还有宠物连连看的等,主要的功能实现了无尽关卡挑战模式.还有催命倒计时,以及链接提示,暂停.多样图片集,挑战眼力和速度等,而 ...