jquery的each(callback) 怎麼使用?會達到什麼樣的效果？-js教程-PHP中文網

首頁

web前端

js教程

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

伊谢尔伦

Jun 16, 2017 pm 03:58 PM

jquery使用怎麼

概述

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

意味著，每次執行傳遞進來的函數時，函數中的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 src="/static/imghwm/default1.png"  data-src="images/img05.jpg"  class="lazy"  title="picture0"  alt=" 第0 幅风景画" />
  <img src="/static/imghwm/default1.png"  data-src="images/img06.jpg"  class="lazy"  title="picture1"  alt=" 第1 幅风景画" />
  <img src="/static/imghwm/default1.png"  data-src="images/img07.jpg"  class="lazy"  title="picture2"  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中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。

See all articles