最近项目被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: 18 } , function(property, value){ ???alert("属性名=" + property + "; 属性值=" + value); ???} );此时function中的property相当于相当于对象的属性名name和age,而value就是属性对应的值，这里是一个json对象,再来看一个相似的例子：
var obj = { one:1, two:2, three:3}; ??????$.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="20">A(20kg)<br> ???<input name="goods_weight" type="checkbox" value="33">B(33kg)<br> ???<input name="goods_weight" type="checkbox" value="36">C(36kg)<br> ???<input name="goods_weight" type="checkbox" value="49">D(49kg)<br> ???<input name="goods_weight" type="checkbox" value="56">E(56kg)<br> ???<input name="goods_weight" type="checkbox" value="78">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 + 1) ); ?});如下所示，结果都变了：
接着，我们注册【订购】按钮的点击事件，用于处理商品订购事务，要求每次订购的商品重量不得超过100kg，否则无法订购并提示相应信息:
$("#btn").click(function(){ ???var weight = 0; ???$.each( $("[name=goods_weight]:checked"), function(){ ???????weight += parseInt(this.value); ???????if(weight > 100){ ???????????return false; ???????} ???}); ???if(weight <= 0){ ???????alert("没有选择任何商品!"); ???}else if(weight > 100){ ???????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()
通过前面的例子可知$.each()函数表示
而$().each()遍历当前jQuery对象，并在每一个元素上执行回调函数，其语法格式如下所示：
---恢复内容结束---
Jquery之each函数详解
原文地址：http://www.cnblogs.com/pyspark/p/8051630.html