生活随笔
收集整理的這篇文章主要介紹了
JS遍历对象或者数组
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
From:?http://keshion.iteye.com/blog/728122
一.純js實現
Js代碼??
<script>?? ??var?obj?=?{"player_id":"GS001","event_id":"1","destroy":"97%"};?? ??var?props?=?"";?? ??for(var?p?in?obj){?? ??????if(typeof(obj[p])=="function"){?? ????????????obj[p]();?? ??????}else{?? ????????????props+=?p?+?"="?+?obj[p]?+?"?";?? ?????????}?? ??}?? ??alert(props);?? </script>??
?
二.jquery實現
?
1.遍歷對象
Js代碼??
$(function(){?? ???????var?tbody?=?"";?????? ?????? ???????? ????var?obj?=[{"name":"admin","password":"123456"}];?? ????$("#result").html("------------遍歷對象?.each的使用-------------");?? ??????alert(obj);?? ?????? ????$.each(obj,function(n,value)?{??? ???????????alert(n+'?'+value);?? ???????????var?trs?=?"";?? ?????????????trs?+=?"<tr><td>"?+?value.name?+"</td>?<td>"?+?value.password?+"</td></tr>";?? ?????????????tbody?+=?trs;????????? ???????????});?? ?? ?????????$("#project").append(tbody);?? ??????? ??});??
?
2.遍歷數組
Js代碼??
$(function(){?? ???var?tbody?=?"";?? ????? ???var?anArray?=?['one','two','three'];?? ???$("#result").html("------------遍歷數組?.each的使用-------------");?? ?????????$.each(anArray,function(n,value)?{?? ???????????alert(n+'?'+value);?? ???????????var?trs?=?"";?? ???????????trs?+=?"<tr><td>"?+value+"</td></tr>";?? ???????????tbody?+=?trs;?? ?????????});?? ????????$("#project").append(tbody);?? ????? });??
?
3.遍歷List集合
Js代碼??
$(function(){?? ??var?tbody?=?"";?? ???? ??var?obj?=[{"name":"zhangsan","password":"123456"},{"name":"lisi","password":"333333"}];?? ??$("#result").html("遍歷List集合?.each的使用");?? ??alert(obj);?? ???? ??$.each(obj,function(n,value)?{??? ?????alert(n+'?'+value);?? ?????var?trs?=?"";?? ?????trs?+=?"<tr><td>"?+value.name+"</td>?<td>"?+?value.password?+"</td></tr>";?? ?????tbody?+=?trs;????????? ??});?? ??$("#project").append(tbody);?? });??
?
?
?
一個完整的例子,向一個select添加元素
Html代碼??
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">?? <html?xmlns="http://www.w3.org/1999/xhtml">?? <head>?? ????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>?? ????<script?type="text/javascript"?src="../js/jquery-1.6.js"></script>?? </head>?? ?? <body>?? <script?type="text/javascript">?? ????var?cities?=?new?Array({"id":1,"name":"nanjing"},{"id":2,"name":"shanghai"});?? ????function?add(){?? ????????var?added?=?"";?? ????????$.each(cities,function(n,?value){?? ????????????//n表示下標?? ????????????var?str?=?"";?? ????????????str?=?'<option?id='?+?value.id?+?'?value='+?'"'?+?value.name?+??'">'?+?value.name?+?'</option>'?+?'<br/>';?? ????????????added?+=?str;?? ????????});?? ????????//alert(added);?? ????????$("#selector").append(added);?? ????}?? ?? ????function?add2(){?? ????????var?added?=?'';?? ????????for(var?i?=?0;?i?<?cities.length;?i++?){?? ????????????var?data?=?"";?? ????????????for(var?k?in?cities[i]){?? ??????????????if(typeof(cities[i][k])=="function"){???? ?????????????????cities[i][k]();???? ??????????????}else{???? ????????????????data?+=??k?+?"="?+??cities[i][k]?+?'?';???? ???????????????}??? ????????????}?? ????????????added?+=?data;?? ????????}?? ????????var?select?=?document.getElementById("test");?? ????????select.innerHTML?=?added;?? ????}?? ????$(function(){?? ????????$("#add").click(function(){?? ????????????add();?? ????????});?? ????});?? </script>?? ????<button?id="add">顯示select</button><br/><br/>?? ????<select?id="selector">?? ????</select>?? ????<div?id="test">?? ????</div>?? ?? </body>??
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎
總結
以上是生活随笔為你收集整理的JS遍历对象或者数组的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
