下面提一下each的几种常用的用法 1.
each处理一维数组 var arr1 = [ "aaa", "bbb", "ccc" ]; $.each(arr1, function(i,val){ alert(i); alert(val); }); alert(i)将输出0，1，2 alert(val)将输出aaa，bbb，ccc
2. each处理二维数组 var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] $.each(arr, function(i, item){ alert(i); alert(item); }); arr2为一个二维数组，item相当于取这二维数组中的每一个数组。 item[0]相对于取每一个一维数组里的第一个值 alert(i)将输出为0，1，2，因为这二维数组含有3个数组元素 alert(item)将输出为 ['a', 'aa', 'aaa']，['b', 'bb', 'bbb']，['c', 'cc', 'ccc'] 对此二位数组的处理稍作变更之后 var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] $.each(arr, function(i, item){ $.each(item,function(j,val){ alert(j); alert(val); }); }); alert(j)将输出为0，1，2，0，1，2，0，1，2 alert(val)将输出为a，aa，aaa，b，bb，bbb，c，cc，ccc
3. each处理json数据，这个each就有更厉害了，能循环每一个属性 var obj = { one:1, two:2, three:3}; each(obj, function(key, val) { alert(key); alert(val); }); 这里alert(key)将输出one two three alert(val)将输出one，1，two，2，three,3 这边为何key不是数字而是属性呢，因为json格式内是一组无序的属性-值，既然无序，又何来数字呢。 而这个val等同于obj[key] ecah处理dom元素，此处以一个input表单元素作为例子。 如果你dom中有一段这样的代码 <input name="aaa" type="hidden" value="111" /> <input name="bbb" type="hidden" value="222" /> <input name="ccc" type="hidden" value="333" /> <input name="ddd" type="hidden" value="444"/> 然后你使用each如下 $.each($("input:hidden"), function(i,val){ alert(val); alert(i); alert(val.name); alert(val.value); }); 那么，alert(val)将输出[object HTMLInputElement]，因为它是一个表单元素。 alert(i)将输出为0，1，2，3 alert(val.name);将输出aaa,bbb,ccc,ddd，如果使用this.name将输出同样的结果 alert(val.value); 将输出111,222,333,444，如果使用this.value将输出同样的结果
4. 如果将以上面一段代码改变成如下的形式 $("input:hidden").each(function(i,val){ alert(i); alert(val.name); alert(val.value); });
5.项目中$.each();方法的使用
$.each(result, function(index, temp) {
typeStr += '<option value=' + temp.id + '>' + temp.name
+ '</option>';
});
实例
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; //本文所用到的数组, 下同 $.each(_mozi,function(key,val){ //回调函数有两个参数,第一个是元素索引,第二个为当前值 alert('_mozi数组中 ,索引 : '+key+' 对应的值为: '+val); }); </script> </head> <body> </body> </html>
