$.each()

Posted on 2012 年 3 月 15 日 in jQuery, jQuery函数
|
by Jason
|

译自官方手册:jQuery.each()

对数组或对对象内容进行循环处理

jQuery.each( collection, callback(indexInArray, valueOfElement) )

collection 遍历的对象或数组

callback(indexInArray, valueOfElement) 在每一个对象上调用的函数

说明

一个通用的遍历函数 , 可以用来遍历对象和数组. 数组和含有一个length属性的伪数组对象 (伪数组对象如function的arguments对象)以数字索引进行遍历,从0到length-1, 其它的对象通过的属性进行遍历.

$.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任何的集合(无论是数组或对象),如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过this 关键字获取,但javascript总会包装this 值作为一个对象—尽管是一个字符串或是一个数字),方法会返回被遍历对象的第一参数

 1 //例子:———传入数组
 2 <!DOCTYPE html>
 3 <html>
 4 　　<head>
 5 　　<script src=”http://code.jquery.com/jquery-latest.js”></script>
 6 　　</head>
 7 <body>
 8 　　<script>
 9 　　　　$.each([52, 97], function(index, value) {
10 　　　　　　alert(index + ‘: ‘ + value);
11 　　　　});
12 　　</script>
13 </body>
14 </html>
15 //输出
16 0: 52
17 1: 97

 1 //例子:———如果一个映射作为集合使用,回调函数每次传入一个键-值对
 2 <!DOCTYPE html>
 3 <html>
 4 　　<head>
 5 　　　　<script src=”http://code.jquery.com/jquery-latest.js”></script>
 6 　　</head>
 7 <body>
 8 <script>
 9 　　var map = {
10 　　　　‘flammable’: ‘inflammable’,
11 　　　　‘duh’: ‘no duh’
12 　　};
13 　　$.each(map, function(key, value) {
14 　　　　alert(key + ‘: ‘ + value);
15 　　});
16 </script>
17 </body>
18 </html>
19 //输出
20 flammable: inflammable
21 duh: no duh

 1 //例子:———回调函数中 return false时可以退出$.each(), 如果返回一个非false 即会像在for循环中使用continue 一样, 会立即进入下一个遍历
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5   <style>
 6   div { color:blue; }
 7   div#five { color:red; }
 8   </style>
 9   <script src=”http://code.jquery.com/jquery-latest.js”></script>
10 </head>
11 <body>
12   <div id=”one”></div>
13   <div id=”two”></div>
14   <div id=”three”></div>
15   <div id=”four”></div>
16   <div id=”five”></div>
17 <script>
18     var arr = [ "one", "two", "three", "four", "five" ];//数组
19     var obj = { one:1, two:2, three:3, four:4, five:5 }; // 对象
20     jQuery.each(arr, function() {  // this 指定值
21       $(“#” + this).text(“Mine is ” + this + “.”);  // this指向为数组的值, 如one, two
22        return (this != “three”); // 如果this = three 则退出遍历
23    });
24     jQuery.each(obj, function(i, val) {  // i 指向键, val指定值
25       $(“#” + i).append(document.createTextNode(” – ” + val));
26     });
27 </script>
28 </body>
29 </html>
30 // 输出
31 Mine is one. – 1
32 Mine is two. – 2
33 Mine is three. – 3
34 - 4
35 - 5

 1 //例子:———遍历数组的项, 传入index和value
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5 　　<script src=”http://code.jquery.com/jquery-latest.js”></script>
 6 </head>
 7 <body>
 8 <script>
 9 　　$.each( ['a','b','c'], function(i, l){
10 　　　　alert( “Index #” + i + “: ” + l );
11 　　});
12 </script>
13 </body>
14 </html>

 1 //例子:———遍历对象的属性,传入 key和value
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5 　　<script src=”http://code.jquery.com/jquery-latest.js”></script>
 6 </head>
 7 <body>
 8 <script>
 9 　　$.each( { name: “John”, lang: “JS” }, function(k, v){
10 　　　　alert( “Key: ” + k + “, Value: ” + v );
11 　　});
12 </script>
13 </body>
14 </html>

 1 1. 如果不想输出第一项 (使用retrun true)进入 下一遍历
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5 　　<script src=”http://code.jquery.com/jquery-latest.js”></script>
 6 </head>
 7 <body>
 8 <script>
 9 　　var myArray=["skipThis", "dothis", "andThis"];
10 　　$.each(myArray, function(index, value) {
11 　　　　if (index == 0) {
12 　　　　return true; // equivalent to ‘continue’ with a normal for loop
13 　　}
14　　 　　// else do stuff…
15 　　　　alert (index + “: “+ value);
16 　　});
17 </script>
18 </body>
19 </html>