$.each()
譯自官方手冊: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 值作為一個對象—盡管是一個字符串或是一個數字),方法會返回被遍歷對象的第一參數
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//例子:———傳入數組
<!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> div { color:blue; } div#five { color:red; } </style> <script src=”http://code.jquery.com/jquery-latest.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 指定值 $(“#” + 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>
// 輸出
//例子:———遍歷數組的項, 傳入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>