1、認識
$().each()遍歷當前jQuery對象,並在每一個元素上執行回調函數。其方法內部是通過調用靜態方法jQuery.each()來實現的。
jQuery.each()是一個通用的遍歷迭代的靜態方法,用於無縫的遍歷對象或者數組。如果是數組,回調函數每次傳入數組的索引和對應的值(值亦可以通過this 關鍵字獲取,但javascript總會包裝this 值作為一個對象—盡管是一個字符串或是一個數字),方法會返回被遍歷對象的第一參數。
2、語法:
2.1、
$(selector).each(function(index,element)
描述:
function(index,element)
必需。為每個匹配元素規定運行的函數。
- index - 選擇器的 index 位置
- element - 當前的元素(也可使用 "this" 選擇器)
2.2、jQuery.each(collection,callback(indexInArray,valueofElement))
3、$().each()和$.each()實例:
3.1、.each()
描述:輸出每個 li 元素的文本:
HTML代碼
<ul> <li>Coffee</li> <li>Milk</li> <li>Soda</li> </ul>
JS代碼:
$(document).ready(function(){ $("li").each(function(){ alert($(this).text()) }); });
結果為:Coffee Milk Soda
3.2、 jQuery.each()
3.2.1、each處理一維數組
var arr1 = [ "aaa", "bbb", "ccc" ]; $.each(arr1, function(i,val){ alert(i); alert(val); }); alert(i)將輸出為:0,1,2 alert(val)將輸出為:aaa,bbb,ccc
3.2.2、each處理二維數組
var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] $.each(arr, function(i, item){ alert(i); alert(item); }); alert(i)將輸出為:0,1,2 alert(item)將輸出為: ['a', 'aa', 'aaa'],['b', 'bb', 'bbb'],['c', 'cc', 'ccc']
3.2.3、對此二位數組的處理稍作變更之后
var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] $.each(arr, function(i, item){ $.each(item,function(j,val){ alert(j); alert(val); }); }); alert(j)輸出為:0,1,2,0,1,2,0,1,2 alert(val)輸出為:a,aa,aaa,b,bb,bbb,c,cc,ccc
3.2.4、each處理json數據,這個each就有更厲害了,能循環每一個屬性
var obj = { one:1, two:2, three:3}; $.each(obj, function(key, val) { alert(key); alert(val); }); alert(key)輸出為:one two three alert(val)輸出為:1 2 3
3.2.5、如果不想輸出第一項 (使用retrun true)進入 下一遍歷
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); }); 結果為:1:dothis 結果為:2:andThis
3.2.6、回調函數中 return false時可以退出$.each(), 如果返回一個非false 即會像在for循環中使用continue 一樣, 會立即進入下一個遍歷.
HTML代碼:
<body> <div id=”one”></div> <div id=”two”></div> <div id=”three”></div> <div id=”four”></div> <div id=”five”></div> </body>
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)); });
結果為:
Mine is one. Mine is two. Mine is three. – 1 - 2 - 3 - 4 - 5
4、擴展
其實jQuery里的each方法是通過js里的call方法來實現的。
下面簡單介紹一下call方法。
call這個方法很奇妙,其實官方的說明是:“調用一個對象的一個方法,以另一個對象替換當前對象。”網上更多的解釋是變換上下文環境,也有說是改變上下文this指針。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
call這個方法很奇妙,其實官方的說明是:“調用一個對象的一個方法,以另一個對象替換當前對象。”網上更多的解釋是變換上下文環境,也有說是改變上下文this指針。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
參數 :thisObj --->可選項。將被用作當前對象的對象。
參數:arg1, arg2, , argN --->可選項。將被傳遞方法參數序列。
說明 :
call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。
如果沒有提供 thisObj 參數,那么 Global 對象被用作 thisObj。
call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。
如果沒有提供 thisObj 參數,那么 Global 對象被用作 thisObj。
function add(a,b) { alert(a+b); } function sub(a,b) { alert(a-b); } add.call(sub,3,1);
這個例子中的意思就是用 add 來替換 sub,add.call(sub,3,1) == add(3,1) ,所以運行結果為:alert(4);
// 注意:js 中的函數其實是對象,函數名是對 Function 對象的引用。