jquery中object對(duì)象循環(huán)遍歷的方法
一個(gè)朋友問(wèn)對(duì)象如何轉(zhuǎn)為數(shù)組,當(dāng)我問(wèn)他為啥要轉(zhuǎn)得時(shí)候,他告訴我,數(shù)組可以用js循環(huán)遍歷,而對(duì)象則不可以。其實(shí)呢,對(duì)象同樣可以循環(huán)遍歷的啊。不用轉(zhuǎn)換也可以循環(huán)!說(shuō)明你對(duì)js或者jquery的某些操作不是很熟練!在這里我簡(jiǎn)單介紹一下!
案例
我們看如下對(duì)象:
var data={
張三:69,
李四:72,
王五:90,
二麻子:88,
前端博客:100,
haorooms : 98,
王大壯:99
}
假如上面是后臺(tái)返回的一個(gè)key,一個(gè)是value的對(duì)象(這種對(duì)象相信大家經(jīng)常遇到吧!),現(xiàn)在要把這個(gè)內(nèi)容,循環(huán)綁定到一個(gè)表格中。有的朋友對(duì)對(duì)象的循環(huán)就不知道怎么操作了!今天我給大家介紹兩個(gè)方法!
方法一:
用$.each的方式進(jìn)行循環(huán)!
假如你不知道$.each的話,建議大家網(wǎng)上搜一搜。當(dāng)然也可以搜索一下“jquery的$().each,$.each的區(qū)別”,關(guān)于他們的區(qū)別,我在這里就不詳細(xì)介紹了??赡苡械呐笥?().each這個(gè)方式用的比較多,今天主要給大家介紹$.each。
$.each()可以遍歷數(shù)組和對(duì)象。方式如下:
$.each([{“name”:”haorooms”,”email”:”bb@126.com”},{“name”:”qianduan”,”email”:”aa@hao.com”}],function(i,n)
{
alert(“索引:”+i,”對(duì)應(yīng)值為:”+n.name);
});
也可以這么遍歷:
var arr1 = [ “one”, “two”, “three”, “four”, “five” ];
$.each(arr1, function(){
alert(this);
});
輸出:one two three four five
最爽的是可以遍歷數(shù)組:
var obj =data;//上面復(fù)制的data
$.each(obj, function(key, val) {
alert(obj[key]);//可以輸出成績(jī)
console.log(key);//可以輸出姓名
});
方法二:
用for in循環(huán),可以遍歷obj
對(duì)上面的對(duì)象,我們可以這么寫(xiě)來(lái)循環(huán)!
for(var i in data){
console.dir(i);//輸出姓名
console.dir(data[i]);//輸出分?jǐn)?shù)
}
for in循環(huán)相信大家應(yīng)該不陌生!for循環(huán)我們用到比較多的是for(var i=0;i<array.length;i++)這樣,這個(gè)主要是針對(duì)數(shù)組來(lái)循環(huán)的。對(duì)于對(duì)象,我們通常用for in循環(huán)!
另外,假如我們遇到如下對(duì)象:
var data={
張三:69,
李四:72,
王五:90,
二麻子:88,
前端博客:100,
haorooms : 98,
王大壯:99
}
我們可以用data.haorooms得到98,但是我們用“data.前端博客”會(huì)報(bào)錯(cuò),因此,在我們用漢字做key值的時(shí)候,選取的時(shí)候應(yīng)該用data["前端博客"],這種方式來(lái)選擇,不要再用點(diǎn)號(hào)了。
以上就是jquery中object對(duì)象循環(huán)遍歷的方法,希望對(duì)大家的學(xué)習(xí)有所幫助。
- JQuery遍歷json數(shù)組的3種方法
- jquery中each遍歷對(duì)象和數(shù)組示例
- jquery遍歷table的tr獲取td的值實(shí)現(xiàn)方法
- JQuery中使用.each()遍歷元素學(xué)習(xí)筆記
- JQuery $.each遍歷JavaScript數(shù)組對(duì)象實(shí)例
- jQuery使用each方法與for語(yǔ)句遍歷數(shù)組示例
- jQuery遍歷對(duì)象、數(shù)組、集合實(shí)例
- jQuery遍歷之next()、nextAll()方法使用實(shí)例
- jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對(duì)象
- jquery對(duì)Json的各種遍歷方法總結(jié)(必看篇)
- jQuery--遍歷操作實(shí)例小結(jié)【后代、同胞及過(guò)濾】
相關(guān)文章
jquery多級(jí)樹(shù)形下拉菜單的實(shí)例代碼
這篇文章主要介紹了jquery多級(jí)樹(shù)形下拉菜單的實(shí)例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-07
jQuery插件HighCharts繪制2D圓環(huán)圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D圓環(huán)圖效果,結(jié)合實(shí)例形式分析了jQuery使用HighCharts插件繪制圓環(huán)圖的實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jQuery實(shí)現(xiàn)的fixedMenu下拉菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的fixedMenu下拉菜單效果代碼,通過(guò)自定義fixedMenu方法實(shí)現(xiàn)點(diǎn)擊下拉菜單效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
jquery的attr方法禁用表單元素禁用輸入內(nèi)容
這篇文章主要介紹了通過(guò)jquery的attr方法來(lái)禁用表單元素禁輸入內(nèi)容,示例如下,需要的朋友可以參考參考2014-06-06
使用jq獲取元素值的常見(jiàn)寫(xiě)法總結(jié)
這篇文章給大家總結(jié)了使用jq獲取元素值的常見(jiàn)寫(xiě)法,文中給大家介紹了詳細(xì)的代碼示例,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12
實(shí)例詳解jQuery表單驗(yàn)證插件validate
validate插件是一個(gè)基于jquery的表單驗(yàn)證插件了里面有許多的常用的一些驗(yàn)證方法我們可以直接調(diào)用,具體的我們一起來(lái)看看2016-01-01

