jQuery中$.each使用詳解

更新時(shí)間：2015年01月29日 11:44:58 投稿：hebedich

這篇文章主要介紹了jQuery中$.each使用詳解,需要的朋友可以參考下

通過(guò)它，你可以遍歷對(duì)象、數(shù)組的屬性值并進(jìn)行處理。

使用說(shuō)明

each函數(shù)根據(jù)參數(shù)的類型實(shí)現(xiàn)的效果不完全一致：

1、遍歷對(duì)象(有附加參數(shù))

$.each(Object, function(p1, p2) {
   this;    //這里的this指向每次遍歷中Object的當(dāng)前屬性值
   p1; p2;   //訪問(wèn)附加參數(shù)
}, ['參數(shù)1', '參數(shù)2']);

2、遍歷數(shù)組(有附件參數(shù))

$.each(Array, function(p1, p2){
   this;    //這里的this指向每次遍歷中Array的當(dāng)前元素
   p1; p2;   //訪問(wèn)附加參數(shù)
}, ['參數(shù)1', '參數(shù)2']);

3、遍歷對(duì)象(沒(méi)有附加參數(shù))

$.each(Object, function(name, value) {
   this;   //this指向當(dāng)前屬性的值
   name;   //name表示Object當(dāng)前屬性的名稱
   value;   //value表示Object當(dāng)前屬性的值
});

4、遍歷數(shù)組(沒(méi)有附加參數(shù))

$.each(Array, function(i, value) {
   this;   //this指向當(dāng)前元素
   i;     //i表示Array當(dāng)前下標(biāo)
   value;   //value表示Array當(dāng)前元素
});

下面提一下jQuery的each方法的幾種常用的用法

Js代碼

var arr = [ "one", "two", "three", "four"];   
 $.each(arr, function(){   
  alert(this);   
 });   
//上面這個(gè)each輸出的結(jié)果分別為：one,two,three,four  
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]   
$.each(arr1, function(i, item){   
  alert(item[0]);   
});   
//其實(shí)arr1為一個(gè)二維數(shù)組，item相當(dāng)于取每一個(gè)一維數(shù)組，  
//item[0]相對(duì)于取每一個(gè)一維數(shù)組里的第一個(gè)值  
//所以上面這個(gè)each輸出分別為：1  4  7   
var obj = { one:1, two:2, three:3, four:4};   
$.each(obj, function(key, val) {   
  alert(obj[key]);      
});  
//這個(gè)each就有更厲害了，能循環(huán)每一個(gè)屬性   
//輸出結(jié)果為：1  2 3 4

本文就先到這里了，簡(jiǎn)單描述下jQuery中。$.each的使用方法，希望小伙伴們能夠喜歡。

您可能感興趣的文章:

相關(guān)文章

最簡(jiǎn)單的jQuery程序入門者學(xué)習(xí)
用jQuery寫的一個(gè)簡(jiǎn)單的程序,用于入門練習(xí),發(fā)給大家,希望初學(xué)者有用.
2009-07-07
jquery.ajax的url中傳遞中文亂碼問(wèn)題的解決方法
本篇文章主要是對(duì)jquery.ajax的url中傳遞中文亂碼問(wèn)題的解決方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
JQuery Tips相關(guān)(1)----關(guān)于$.Ready()
學(xué)習(xí)jQuery的第一件事是：如果你想要一個(gè)事件運(yùn)行在你的頁(yè)面上，你必須在$(document).ready()里調(diào)用這個(gè)事件。所有包括在$(document).ready()里面的元素或事件都將會(huì)在DOM完成加載之后立即加載，并且在頁(yè)面內(nèi)容加載之前。
2014-08-08
jQuery+ajax實(shí)現(xiàn)文章點(diǎn)贊功能的方法
這篇文章主要介紹了jQuery+ajax實(shí)現(xiàn)文章點(diǎn)贊功能的方法,涉及jQuery基于ajax無(wú)刷新post提交實(shí)現(xiàn)點(diǎn)贊功能的具體步驟與相關(guān)技巧,需要的朋友可以參考下
2015-12-12
Easyui和zTree兩種方式分別實(shí)現(xiàn)樹(shù)形下拉框
最近工作中需要用到樹(shù)形下拉框，因?yàn)轫?xiàng)目中樹(shù)形結(jié)構(gòu)使用的是zTree，效果不是很好看，于是想著使用easyui的comboTree，雖然效果達(dá)到了，但是風(fēng)格和bootstrap不搭，下面把這兩種方式的效果分享到腳本之家平臺(tái)供大家參考
2017-08-08
詳解layui彈窗父子窗口之間傳參數(shù)的方法
本篇文章主要介紹了ayui彈窗父子窗口之間傳參數(shù)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
jquery實(shí)現(xiàn)圖片輪播器
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)圖片輪播器的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
JQuery自定義事件的應(yīng)用 JQuery最佳實(shí)踐
本文主要介紹JQuery框架里面支持的自定義事件模型，通過(guò)實(shí)例說(shuō)明什么時(shí)候可以利用事件模型進(jìn)行面向?qū)ο蟮腏S編程，以及利用“帶命名空間的事件處理函數(shù)”來(lái)避免unbind時(shí)影響別的事件訂閱。
2010-08-08
實(shí)現(xiàn)easyui的datagrid導(dǎo)出為excel的示例代碼
下面小編就為大家?guī)?lái)一篇實(shí)現(xiàn)easyui的datagrid導(dǎo)出為excel的示例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-11-11
jQuery插件pagination實(shí)現(xiàn)分頁(yè)特效
jQuery分頁(yè)插件示例，ajax方式的jQuery前端分頁(yè)插件，其核心代碼jquery.pagination.js已隨示例打包，Demo中包括了5種不同的分頁(yè)效果演示，全部是Ajax無(wú)刷新方式實(shí)現(xiàn)分頁(yè)，對(duì)于搞前端開(kāi)發(fā)的朋友來(lái)說(shuō)，這是個(gè)值得收藏的代碼特效，為以后實(shí)現(xiàn)無(wú)刷新分頁(yè)提供方便。
2015-04-04