jQuery.each()

类别：实用工具

jQuery.each( array, callback )返回类型：Object

描述：一个原生的迭代器函数，它可以用来持续地迭代遍对象和数组。数组以及类似数组的带有length属性的对象（譬如函数的arguments对象）会用数字索引迭代，从0到length-1。其它对象通过它们的命名属性来遍历。

$.each()函数不同于$(selector).each()，后者仅仅用来迭代遍一个jQuery对象。$.each()函数可以用来迭代遍任何集合，无论它是一个对象或数组。在数组的情况下，回调函数每次传入一个数组索引以及对象的数组值。（也可以通过this关键字来访问该值，但是JavaScript将把this值包装成一个Object，哪怕它是一个字符串或一个数字值。）此方法返回它的第一个参数，被迭代的对象。

注意：$.each()函数内部地检索并使用传入的集合的length属性。所以，如果集合有一个属性称为length——例如，{bar: 'foo', length: 10}——此函数就不能按期待正确地工作。

1
2
3
 
$.each([ 52, 97 ], function( index, value ) {
  alert( index + ": " + value );
});

这产生了两条消息：

0: 52
1: 97

如果对象用作集合，回调函数每次传递了一个键值对：

1
2
3
4
5
6
7
 
var obj = {
  "flammable": "inflammable",
  "duh": "no duh"
};
$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});

它又一次产生了两条消息：

flammable: inflammable
duh: no duh

我们可以在特性的迭代中破坏$.each()循环，只要让回调函数返回false。返回非false等同于for循环中的continue语句；它将立即跳到下一个迭代中。

示例：

迭代遍数组显示了每个数字，以单词的形式以及数字的形式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.each demo</title>
  <style>
  div {
    color: blue;
  }
  div#five {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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( i, val ) {
  $( "#" + val ).text( "Mine is " + val + "." );
 
  // Will stop running after "three"
  return ( val !== "three" );
});
 
jQuery.each( obj, function( i, val ) {
  $( "#" + i ).append( document.createTextNode( " - " + val ) );
});
</script>
 
</body>
</html>

演示：

迭代遍数组中的每一项，访问当前项以及它的索引。

1
2
3
 
$.each( [ "a", "b", "c" ], function( i, l ){
  alert( "Index #" + i + ": " + l );
});

迭代遍对象中的属性，访问当前项以及它的键。

1
2
3
 
$.each({ name: "John", lang: "JS" }, function( k, v ) {
  alert( "Key: " + k + ", Value: " + v );
});