jQuery中$.each()函数的用法引申实例
语法:
$.each(collection,callback(indexInArray,valueOfElement))
值得一提的是,forEach可以很方便的遍历数组和NodeList,jQuery中的jQuery对象本身已经部署了这类遍历方法,而在原生JavaScript中则可以使用forEach方法,但是IE并不支持,因此我们可以手动把forEach方法部署到数组和NodeList中:
if(!Array.prototype.forEach){
Array.prototype.forEach=function(fn,scope){
for(vari=0,len=this.length;i<len;++i){
fn.call(scope,this[i],i,this);
}
}
}
//部署完毕后IE也可以使用forEach了
document.getElementsByTagName('p').forEach(function(e){
e.className='inner';
});
而jQuery中的$.each()函数则更加强大。$.each()函数和$(selector).each()不一样。$.each()函数可以用来遍历任何一个集合,不管是一个JavaScript对象或者是一个数组,如果是一个数组的话,回调函数每次传递一个数组的下标和这个下标所对应的数组的值(这个值也可以在函数体中通过this关键字获取,但是JavaScript通常会把this这个值当作一个对象即使他只是一个简单的字符串或者是一个数字),这个函数返回所遍历的对象,也就是这个函数的第一个参数,注意这里还是原来的那个数组,这是和map的区别。
其中collection代表目标数组,callback代表回调函数(自己定义),回调函数的参数第一个是数组的下标,第二个是数组的元素。当然我们也可以给回调函数只设定一个参数,这个参数一定是下标,而没有参数也是可以的。
例1:传入数组
<!DOCTYPEhtml>
<html>
<head>
<scriptsrc=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
$.each([52,97],function(index,value){
alert(index+‘:‘+value);
});
</script>
</body>
</html>
输出:
0:52 1:97
例2:如果一个映射作为集合使用,回调函数每次传入一个键-值对
<!DOCTYPEhtml>
<html>
<head>
<scriptsrc=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
varmap={
‘flammable':‘inflammable',
‘duh':‘noduh'
};
$.each(map,function(key,value){
alert(key+‘:‘+value);
});
</script>
</body>
</html>
输出:
flammable:inflammable duh:noduh
例3:回调函数中returnfalse时可以退出$.each(),如果返回一个非false即会像在for循环中使用continue一样,会立即进入下一个遍历
<!DOCTYPEhtml>
<html>
<head>
<style>
div{color:blue;}
div#five{color:red;}
</style>
<scriptsrc=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<divid=”one”></div>
<divid=”two”></div>
<divid=”three”></div>
<divid=”four”></div>
<divid=”five”></div>
<script>
vararr=["one","two","three","four","five"];//数组
varobj={one:1,two:2,three:3,four:4,five:5};//对象
jQuery.each(arr,function(){//this指定值
$(“#”+this).text(“Mineis”+this+“.”);//this指向为数组的值,如one,two
return(this!=“three”);//如果this=three则退出遍历
});
jQuery.each(obj,function(i,val){//i指向键,val指定值
$(“#”+i).append(document.createTextNode(”–”+val));
});
</script>
</body>
</html>
输出:
Mineisone.–1 Mineistwo.–2 Mineisthree.–3 -4 -5
