jquery的each(callback) 怎麼使用?會達到什麼樣的效果？
- 伊谢尔伦原創
- 2017-06-16 15:58:481265瀏覽
概述
以每一個符合的元素作為上下文來執行一個函數。
意味著，每次執行傳遞進來的函數時，函數中的this關鍵字都指向一個不同的DOM元素（每次都是一個不同的匹配元素）。而且，在每次執行函數時，都會給函數傳遞一個表示作為執行環境的元素在匹配的元素集合中所處位置的數字值作為參數（從零開始的整數）。 回傳 'false' 將停止循環 (就像在普通的循環中使用 'break')。傳回 'true' 跳至下一個循環(就像在普通的循環中使用'continue')。
範例如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title> 遍历元素</title>
<script src="js/jQuery.js" type="text/JavaScript"></script>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
-->
<style type="text/css">
body{font-size:13px}
img{border:solid 1px #ccc;padding:3px;margin:5px;width:143px;height:101px}
</style>
<script type="text/javascript">
$(function() {
$("img").each(function(index){
// 根据形参index 设置元素的title 属性
this.title = " 第" + index +" 幅风景图片，alt 内容是" + this.alt;
if(i==1)
return false;
})
})
</script>
</head>
<body>
<p>
<img title="picture0" src="images/img05.jpg" alt=" 第0 幅风景画" />
<img title="picture1" src="images/img06.jpg" alt=" 第1 幅风景画" />
<img title="picture2" src="images/img07.jpg" alt=" 第2 幅风景画" />
</p>
</body>
</html>通用例遍方法，可用來例遍物件和陣列。
不同於例遍 jQuery 物件的 $().each() 方法，此方法可用於例遍任何物件。 回呼函數有兩個參數：第一個為物件的成員或陣列的索引，第二個為對應變數或內容。如果需要退出 each 循環可使回呼函數傳回 false，其它傳回值將被忽略。
var dic={"tom" : 20,"jerry" :30, "jim":40};
$.each(dic,function(key,value){ alert(key+"的年龄是"+value); });結果：tom的年齡是20
jerry的年齡是20
jim的年齡為40## Sharp 1 2=2
3=3
var arr=[1,2,3];
$.each(arr,function(key,value){ key++;alert(key+"="+value);});結果：0
#1 2
var arr=[1,2,3];
$.each(arr,function(item){ alert(item);});結果：20
#30 40#$.each()與$(selector ).each()不同, 後者專用於jquery物件的遍歷, 前者可用於遍歷任何的集合(無論是數組或物件),如果是數組,回調函數每次傳入數組的索引和對應的值(值也可以透過this 關鍵字取得,但javascript總是會包裝this 值作為一個物件—儘管是一個字串或是一個數字),方法會傳回被遍歷物件
的第一參數.each()方法能讓DOM迴圈結構簡潔，不容易出錯。 each()函數封裝了十分強大的遍歷功能，使用也很方便，它可以遍歷一維數組
、多維數組、DOM, JSON 等等在javaScript開發過程中使用$each可以大大的減輕我們的工作量。 each處理一維數組
var dic={"tom" : 20,"jerry" :30, "jim":40};
$.each(dic,function(){ alert(this);});alert(i)將輸出0，1，2alert(val)將輸出aaa，bbb，ccc
each處理
二維數組
var arr1 = [ "aaa", "bbb", "ccc" ];
$.each(arr1, function(i,val){
alert(i);
alert(val);
});arr2為一個二維數組，item相當於取這二維數組中的每一個數組。 item[0]相對於取每一個一維數組裡的第一個值 alert(i)將輸出為0，1，2，因為這二維數組含有3個數組元素 alert(item)將輸出為['a', 'aa', 'aaa']，['b', 'bb', 'bbb']，['c', 'cc', 'ccc']
對此二位數組的處理稍作變更之後
var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
$.each(arr, function(i, item){
alert(i);
alert(item);
});alert(j)將輸出為0，1，2，0，1，2，0，1，2alert(val)將輸出為a，aa，aaa，b，bb，bbb，c，cc，ccceach處理json數據，這個each就有更厲害了，能循環每一個屬性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(key)將輸出one two threealert(val)將輸出one，1，two，2，three,3
這邊為何key不是數字而是屬性呢，因為json格式內是一組無序的屬性-值，既然無序，又何來數字。而這個val等同於obj[key]
ecah處理dom元素，此處以一個input表單元素作為範例。
var obj = { one:1, two:2, three:3};
each(obj, function(key, val) {
alert(key);
alert(val);
});然後你使用each如下<input name="aaa" type="hidden" value="111" /> <input name="bbb" type="hidden" value="222" /> <input name="ccc" type="hidden" value="333" /> <input name="ddd" type="hidden" value="444"/>那麼，alert(val)將輸出[object HTMLInputElement]，因為它是一個表單元素。 alert(i)將輸出為0，1，2，3alert(val.name);將輸出aaa,bbb,ccc,ddd，如果使用this.name將輸出同樣的結果
alert(val.value); 將輸出111,222,333,444，如果使用this.value將輸出同樣的結果
如果將以上面一段程式碼改變成如下的形式
$.each($("input:hidden"), function(i,val){
alert(val);
alert(i);
alert(val.name);
alert(val.value);
});可以看到，輸出的結果是一樣的，至於兩種寫法究竟區別在哪，我也還不知。此改變運用到上面幾段數組的運算也會輸出同樣的結果。 以上是jquery的each(callback) 怎麼使用?會達到什麼樣的效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！