each()方法能讓DOM迴圈結構簡潔，不容易出錯。 each()函數封裝了十分強大的遍歷功能，使用也很方便，它可以遍歷一維數組、多維數組、DOM, JSON 等等，在javaScript開發過程中使用$each可以大幅的減輕我們的工作量。
each()方法實例：
var arr = [ "aaa", "bbb", "ccc" ];
$.each(arr, function(i,a){
alert(i); // i 是循环的序数
alert(a); // a 是值
});
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});其實arr1為一個二維數組，item相當於取每一個一維數組，
item[0]相對於取每一個一維數組裡的第一個值
所以上面這個each輸出分別為：1 4 7
一個通用的遍歷函數, 可以用來遍歷物件和數組. 數組和含有一個length屬性的偽數組對象(偽數組對像如function的arguments對象)以數字索引進行遍歷,從0到length-1, 其它的對象通過的屬性進行遍歷.
$.each()與$(selector).each()不同, 後者專用於jquery物件的遍歷, 前者可用於遍歷任何的集合(無論是數組或物件),如果是數組,回調函數每次傳入數組的索引和對應的值(值也可以透過this 關鍵字取得,但javascript總是會包裝this 值作為一個物件—儘管是一個字串或是一個數字),方法會傳回被遍歷物件的第一個參數。
範例:——傳入陣列
<!DOCTYPE html>
<html>
<head>
<script src=”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
範例:——如果一個映射作為集合使用,回呼函數每次傳入一個鍵-值對
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
var map = {
‘flammable': ‘inflammable',
‘duh': ‘no duh'
};
$.each(map, function(key, value) {
alert(key + ‘: ‘ + value);
});
</script>
</body>
</html>//输出 flammable: inflammable duh: no duh
範例:——回呼函數中return false時可以退出$.each(), 如果回傳一個非false 即會像在for迴圈中使用continue 一樣, 會立即進入下一個遍歷
<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; }
p#five { color:red; }
</style>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<p id=”one”></p>
<p id=”two”></p>
<p id=”three”></p>
<p id=”four”></p>
<p id=”five”></p>
<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 指定值
$(“#” + this).text(“Mine is ” + 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>// 输出 Mine is one. – 1 Mine is two. – 2 Mine is three. – 3 - 4 - 5
範例:———遍歷數組的項目, 傳入index和value
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
$.each( ['a','b','c'], function(i, l){
alert( “Index #” + i + “: ” + l );
});
</script>
</body>
</html>範例:—－遍歷物件的屬性,傳入key和value
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
$.each( { name: “John”, lang: “JS” }, function(k, v){
alert( “Key: ” + k + “, Value: ” + v );
});
</script>
</body>
</html>正自註解的範例
1. 如果不想輸出第一項(使用retrun true)進入下一遍歷
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
var myArray=["skipThis", "dothis", "andThis"];
$.each(myArray, function(index, value) {
if (index == 0) {
return true; // equivalent to ‘continue' with a normal for loop
}
// else do stuff…
alert (index + “: “+ value);
});
</script>
</body>
</html>以上是JQuery中$.each的使用方法 以及和$(selector).each()的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！
