1、$.each( collection, callback(indexInArray, valueOfElement) )
$.each()函數和$(selector).each()不一樣。$.each()函數可以用來遍歷任何一個集合，不管是一個JavaScript對象或者是一個數組，如果是一個數組的話，回調函數每次傳遞一個數組的下標和這個下標所對應的數組的值（這個值也可以在函數體中通過this關鍵字獲取，但是JavaScript通常會把this這個值當作一個對象即使他只是一個簡單的字符串或者是一個數字），這個函數返回所遍歷的對象，也就是這個函數的第一個參數，注意這裏還是原來的那個數組，這是和map的區別。
其中collection代表目標數組，callback代表回調函數（自己定義），回調函數的參數第一個是數組的下標，第二個是數組的元素。當然我們也可以給回調函數只設定一個參數，這個參數一定是下標，而沒有參數也是可以的。
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//例子:———傳入數組
<!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>
// 輸出
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>
2.一個級聯下拉框的例子
$(function(){
function objInit(obj) {//下拉列表框初始化
return $(obj).html("<option>請選擇</option>");
}
var arrData = { //定義一個數組保存相關數據
廠商1: { 品牌1_1: "型號1_1_1,型號1_1_2", 品牌1_2: "型號1_2_1,型號1_2_2" },
廠商2: { 品牌2_1: "型號2_1_1,型號2_1_2", 品牌2_2: "型號2_2_1,型號2_2_2" },
廠商3: { 品牌3_1: "型號3_1_1,型號3_1_2", 品牌3_2: "型號3_2_1,型號3_2_2" }
};
$.each(arrData, function(pF) { //遍歷數據增加廠商項
$("#selF").append("<option>" + pF + "</option>");
});
$("#selF").change(function() { //廠商列表框選項改變事件
objInit("#selT");
objInit("#selC");
$.each(arrData, function(pF, pS) {
if ($("#selF option:selected").text() == pF) { //如果廠商選中項與數據匹配
$.each(pS, function(pT, pC) { //遍歷數據增加品牌項
$("#selT").append("<option>" + pT + "</option>");
});
$("#selT").change(function() { //品牌列表框選項改變事件
objInit("#selC");
$.each(pS, function(pT, pC) {
if ($("#selT option:selected").text() == pT) { //如果品牌選中項與數據匹配
$.each(pC.split(","), function() { //遍歷數據增加型號項
$("#selC").append("<option>" + this + "</option>");
});
}
});
});
}
});
});
$("#Button1").click(function() { //註冊按鈕單擊事件
var strValue = "您選擇的廠商:";
strValue += $("#selF option:selected").text();
strValue += " 您選擇的品牌:";
strValue += $("#selT option:selected").text();
strValue += " 您選擇的型號:";
strValue += $("#selC option:selected").text();
$("#divTip")
.show()
.addClass("clsTip")
.html(strValue); //顯示提示信息並增加樣式
});
})