返回值:ObjectjQuery.each(collection, callback(indexInArray, valueOfElement))
通用的迭代函数,用于无缝的迭代对象及数组。含有 length 属性的数组和类数组(array-like)对象(例如,函数的 arguments 对象)会按索引值进行迭代,迭代的索引值从 0 开始,到 length-1 结束。其它的对象会按照它们的属性名进行迭代。
-
1.0 新增jQuery.each(collection, callback(indexInArray, valueOfElement))
collection (Object) 将要用于迭代的对象或数组。callback(indexInArray, valueOfElement) (Function) 该函数会在每次迭代时被调用。
$.each()
函数与 $(selector).each() 不同,$(selector).each() 仅用于 jQuery 对象的迭代,而 $.each()
函数可以用于迭代任何集合,无论它是一个映射(JavaScript 对象)还是一个数组。在迭代数组的时候,回调函数中的参数分别是当前数组中元素的的索引值及对象的元素值。(可以通过 this
关键字来取得该值。Javascript 总是将 this
当成一个Object
,即使它只是一个简单的字符串或数值。)该方法返回其第一个参数,迭代对象。
$.each([52, 97], function(index, value) { alert(index + ': ' + value); });
上述方法产生两条消息:
0: 52
1: 97
如果将映射作为迭代的对象,那么回调函数中的参数就是映射的键和值:
var map = { 'flammable': 'inflammable', 'duh': 'no duh' }; $.each(map, function(key, value) { alert(key + ': ' + value); });
同样,上述方法生产两个消息:
flammable: inflammable
duh: no duh
我们可以在 $.each()
迭代时通过在回调函数中返回 false
的方式来中止迭代。返回非-false就相当于循环中的 continue
语句,意味着它会立即跳过当前的迭代,马上开始下一个迭代。
示例:
对数组进行迭代,迭代过程中同时显示关键字及数值
<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; }
div#five { color:red; }
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<script>
var arr = [ "one", "two", "three", "four", "five" ];
var obj = { one:1, two:2, three:3, four:4, five:5 };
jQuery.each(arr, function() {
$("#" + this).text("Mine is " + this + ".");
return (this != "three"); // will stop running after "three"
});
jQuery.each(obj, function(i, val) {
$("#" + i).append(document.createTextNode(" - " + val));
});
</script>
</body>
</html>
演示:
示例:
迭代一个数组,并同时访问迭代的元素及它的索引值。
jQuery 代码:
$.each( ['a','b','c'], function(i, l){
alert( "Index #" + i + ": " + l );
});
示例:
在一个元素的属性上进行迭代,并同时访问它的键及值。
jQuery 代码:
$.each( { name: "John", lang: "JS" }, function(k, v){
alert( "Key: " + k + ", Value: " + v );
});