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

