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

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

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1665
14
CakePHP 教程
1423
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
crystaldiskmark是什麼軟體? -crystaldiskmark如何使用? crystaldiskmark是什麼軟體? -crystaldiskmark如何使用? Mar 18, 2024 pm 02:58 PM

CrystalDiskMark是一款適用於硬碟的小型HDD基準測試工具,可快速測量順序和隨機讀取/寫入速度。接下來就讓小編為大家介紹一下CrystalDiskMark,以及crystaldiskmark如何使用吧~一、CrystalDiskMark介紹CrystalDiskMark是一款廣泛使用的磁碟效能測試工具,用於評估機械硬碟和固態硬碟(SSD)的讀取和寫入速度和隨機I/O性能。它是一款免費的Windows應用程序,並提供用戶友好的介面和各種測試模式來評估硬碟效能的不同方面,並被廣泛用於硬體評

foob​​ar2000怎麼下載? -foobar2000怎麼使用 foob​​ar2000怎麼下載? -foobar2000怎麼使用 Mar 18, 2024 am 10:58 AM

foob​​ar2000是一款能隨時收聽音樂資源的軟體,各種音樂無損音質帶給你,增強版本的音樂播放器,讓你得到更全更舒適的音樂體驗,它的設計理念是將電腦端的高級音頻播放器移植到手機上,提供更便捷高效的音樂播放體驗,介面設計簡潔明了易於使用它採用了極簡的設計風格,沒有過多的裝飾和繁瑣的操作能夠快速上手,同時還支持多種皮膚和主題,根據自己的喜好進行個性化設置,打造專屬的音樂播放器支援多種音訊格式的播放,它還支援音訊增益功能根據自己的聽力情況調整音量大小,避免過大的音量對聽力造成損害。接下來就讓小編為大

BTCC教學:如何在BTCC交易所綁定使用MetaMask錢包? BTCC教學:如何在BTCC交易所綁定使用MetaMask錢包? Apr 26, 2024 am 09:40 AM

MetaMask(中文也叫小狐狸錢包)是一款免費的、廣受好評的加密錢包軟體。目前,BTCC已支援綁定MetaMask錢包,綁定後可使用MetaMask錢包進行快速登錄,儲值、買幣等,且首次綁定還可獲得20USDT體驗金。在BTCCMetaMask錢包教學中,我們將詳細介紹如何註冊和使用MetaMask,以及如何在BTCC綁定並使用小狐狸錢包。 MetaMask錢包是什麼? MetaMask小狐狸錢包擁有超過3,000萬用戶,是當今最受歡迎的加密貨幣錢包之一。它可免費使用,可作為擴充功能安裝在網絡

網易信箱大師怎麼用 網易信箱大師怎麼用 Mar 27, 2024 pm 05:32 PM

網易郵箱,作為中國網友廣泛使用的一種電子郵箱,一直以來以其穩定、高效的服務贏得了用戶的信賴。而網易信箱大師,則是專為手機使用者打造的信箱軟體,它大大簡化了郵件的收發流程,讓我們的郵件處理變得更加便利。那麼網易信箱大師該如何使用,具體又有哪些功能呢,下文中本站小編將為大家帶來詳細的內容介紹,希望能幫助到大家!首先,您可以在手機應用程式商店搜尋並下載網易信箱大師應用程式。在應用寶或百度手機助手中搜尋“網易郵箱大師”,然後按照提示進行安裝即可。下載安裝完成後,我們打開網易郵箱帳號並進行登錄,登入介面如下圖所示

百度網盤app怎麼用 百度網盤app怎麼用 Mar 27, 2024 pm 06:46 PM

在如今雲端儲存已成為我們日常生活和工作中不可或缺的一部分。百度網盤作為國內領先的雲端儲存服務之一,憑藉其強大的儲存功能、高效的傳輸速度以及便捷的操作體驗,贏得了廣大用戶的青睞。而且無論你是想要備份重要文件、分享資料,還是在線上觀看影片、聽取音樂,百度網盤都能滿足你的需求。但很多用戶可能對百度網盤app的具體使用方法還不了解,那麼這篇教學就將為大家詳細介紹百度網盤app如何使用,還有疑惑的用戶們就快來跟著本文詳細了解一下吧!百度雲網盤怎麼用:一、安裝首先,下載並安裝百度雲軟體時,請選擇自訂安裝選

教你使用 iOS 17.4「失竊裝置保護」新進階功能 教你使用 iOS 17.4「失竊裝置保護」新進階功能 Mar 10, 2024 pm 04:34 PM

Apple在周二推出了iOS17.4更新,為iPhone帶來了一系列新功能和修復。這次更新包含了全新的表情符號,同時歐盟用戶也能夠下載其他應用程式商店。此外,更新還加強了對iPhone安全性的控制,引入了更多的「失竊設備保護」設定選項,為用戶提供更多選擇和保障。 "iOS17.3首次引入了「失竊設備保護」功能,為用戶的敏感資料增加了額外的安全保障。當用戶不在家等熟悉地點時,該功能要求用戶首次輸入生物特徵信息,並在一小時後再次輸入資訊才能存取和更改某些數據,如修改AppleID密碼或關閉失竊設備保護功能

小米汽車app怎麼用 小米汽車app怎麼用 Apr 01, 2024 pm 09:19 PM

小米汽車軟體提供遠端車控功能,讓使用者可以透過手機或電腦遠端控制車輛,例如開關車輛的門窗、啟動引擎、控制車輛的空調和音響等,下文就是這個軟體的使用及內容,一起了解下吧。小米汽車app功能及使用方法大全1、小米汽車app在3月25日上線蘋果AppStore,現在安卓手機的應用商店中也可以下載了;購車:了解小米汽車核心亮點和技術參數,可預約試駕、配置訂購您的小米汽車,支援線上處理提車待辦事項。 3.社群:了解小米汽車品牌資訊,交流用車體驗,分享精彩車生活;4、車控:手機就是遙控器,遠端控制,即時安防,輕

唧唧down是什麼? -唧唧down怎麼用 唧唧down是什麼? -唧唧down怎麼用 Mar 18, 2024 am 11:46 AM

唧唧Down也可以叫做JJDown,這是專門為嗶哩嗶哩打造的一個視頻下載工具,但是很多小伙伴對這個軟體不了解,今天就讓小編為大家解答一下唧唧down是什麼?唧唧down怎麼使用吧。一、唧唧down的由來唧唧down起源於2014年,是個非常老牌的下載視訊軟體,介面採用Win10磁貼風格,簡潔美觀,操作方便。唧娜是唧唧down的看板娘,畫師是あさひクロイ。唧唧down一直致力於為使用者提供最佳的下載體驗,不斷更新和優化軟體,解決各種問題和bug,增加新的功能和特色。唧唧Down的功能唧唧Down是

See all articles