在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法。两个方法是有区别的,从而这两个方法在针对不同的操作上,显示了各自的特点。
$().each,对于这个方法,在dom处理上面用的较多。如果页面有多个input标签类型为checkbox,对于这时用$().each来处理多个checkbook,例如:
$(“input[name=’checkbox’]”).each(function(i){ if($(this).attr(‘checked’)==true){ //一些操作代码 } }
//回调函数是可以传递参数,i就为遍历的索引。
对于数组的遍历,使用$.each()来遍历更加方便:
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
//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
注意: jQuery的方法,返回一个jQuery对象遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时,它通常不需要显式地循环的.each()
方法:
// The .each() method is unnecessary here: $( "li" ).each(function() { $(this).addClass( "foo" ); }); // Instead, you should rely on implicit iteration: $( "li" ).addClass( "bar" );
Example: 遍历三个div并设置它们的color属性。
<!DOCTYPE html> <html> <head> <style> div { color:red; text-align:center; cursor:pointer; font-weight:bolder; width:300px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div>Click here</div> <div>to iterate through</div> <div>these divs.</div> <script> $(document.body).click(function () { $( "div" ).each(function (i) { if ( this.style.color != "blue" ) { this.style.color = "blue"; } else { this.style.color = ""; } }); }); </script> </body> </html>