jQuery中$.each使用詳解

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

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

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

使用說明

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

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

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

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

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

3、遍歷對象(沒有附加參數(shù))

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

4、遍歷數(shù)組(沒有附加參數(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);   
 });   
//上面這個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]);   
});   
//其實arr1為一個二維數(shù)組，item相當(dāng)于取每一個一維數(shù)組，  
//item[0]相對于取每一個一維數(shù)組里的第一個值  
//所以上面這個each輸出分別為：1  4  7   
var obj = { one:1, two:2, three:3, four:4};   
$.each(obj, function(key, val) {   
  alert(obj[key]);      
});  
//這個each就有更厲害了，能循環(huán)每一個屬性   
//輸出結(jié)果為：1  2 3 4

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

您可能感興趣的文章:

相關(guān)文章

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