首頁 > web前端 > js教程 > jquery的each(callback) 怎麼使用?會達到什麼樣的效果?

jquery的each(callback) 怎麼使用?會達到什麼樣的效果?

伊谢尔伦
發布: 2017-06-16 15:58:48
原創
1344 人瀏覽過

概述

以每一個符合的元素作為上下文來執行一個函數。

意味著,每次執行傳遞進來的函數時,函數中的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

          jerry的年齡是30

          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,2

alert(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 = [[&#39;a&#39;, &#39;aa&#39;, &#39;aaa&#39;], [&#39;b&#39;, &#39;bb&#39;, &#39;bbb&#39;], [&#39;c&#39;, &#39;cc&#39;, &#39;ccc&#39;]]
  $.each(arr, function(i, item){
alert(i);
alert(item);
  });
登入後複製

alert(j)將輸出為0,1,2,0,1,2,0,1,2

alert(val)將輸出為a,aa,aaa,b,bb,bbb,c,cc​​,ccc

each處理json數據,這個each就有更厲害了,能循環每一個屬性

var arr = [[&#39;a&#39;, &#39;aa&#39;, &#39;aaa&#39;], [&#39;b&#39;, &#39;bb&#39;, &#39;bbb&#39;], [&#39;c&#39;, &#39;cc&#39;, &#39;ccc&#39;]]
  $.each(arr, function(i, item){
  $.each(item,function(j,val){
     alert(j);
    alert(val);
 });
});
登入後複製

這裡alert(key)將輸出one two three

alert(val)將輸出one,1,two,2,three,3

這邊為何key不是數字而是屬性呢,因為json格式內是一組無序的屬性-值,既然無序,又何來數字。

而這個val等同於obj[key]

ecah處理dom元素,此處以一個input表單元素作為範例。

如果你dom中有一段這樣的程式碼

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,3

alert(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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板