JS遍历对象或者数组

一.纯js实现

Js代码  收藏代码
  1. <script>  
  2.   var obj = {"player_id":"GS001","event_id":"1","destroy":"97%"};  
  3.   var props = "";  
  4.   for(var p in obj){  
  5.       if(typeof(obj[p])=="function"){  
  6.             obj[p]();  
  7.       }else{  
  8.             props+= p + "=" + obj[p] + " ";  
  9.          }  
  10.   }  
  11.   alert(props);  
  12. </script>  

 

二.jquery实现

 

1.遍历对象

Js代码  收藏代码
  1. $(function(){  
  2.        var tbody = "";      
  3.     //------------遍历对象 .each的使用-------------  
  4.       //对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式，必须保证JSON的格式要求，回调的对象必须使用eval函数进行转化（否则将得不到Object）。本文不作详细介绍服务器端回调的数据问题，我们将直接自定义对象)  
  5.     var obj =[{"name":"admin","password":"123456"}];  
  6.     $("#result").html("------------遍历对象 .each的使用-------------");  
  7.       alert(obj);//是个object元素  
  8.     //下面使用each进行遍历  
  9.     $.each(obj,function(n,value) {   
  10.            alert(n+' '+value);  
  11.            var trs = "";  
  12.              trs += "<tr><td>" + value.name +"</td> <td>" + value.password +"</td></tr>";  
  13.              tbody += trs;         
  14.            });  
  15.   
  16.          $("#project").append(tbody);  
  17.        
  18.   });  

 

2.遍历数组

Js代码  收藏代码
  1. $(function(){  
  2.    var tbody = "";  
  3.    //------------遍历数组 .each的使用-------------  
  4.    var anArray = ['one','two','three'];  
  5.    $("#result").html("------------遍历数组 .each的使用-------------");  
  6.          $.each(anArray,function(n,value) {  
  7.            alert(n+' '+value);  
  8.            var trs = "";  
  9.            trs += "<tr><td>" +value+"</td></tr>";  
  10.            tbody += trs;  
  11.          });  
  12.         $("#project").append(tbody);  
  13.      
  14. });  

 

3.遍历List集合

Js代码  收藏代码
  1. $(function(){  
  2.   var tbody = "";  
  3.   //------------遍历List集合 .each的使用-------------  
  4.   var obj =[{"name":"zhangsan","password":"123456"},{"name":"lisi","password":"333333"}];  
  5.   $("#result").html("遍历List集合 .each的使用");  
  6.   alert(obj);//是个object元素  
  7.   //下面使用each进行遍历  
  8.   $.each(obj,function(n,value) {   
  9.      alert(n+' '+value);  
  10.      var trs = "";  
  11.      trs += "<tr><td>" +value.name+"</td> <td>" + value.password +"</td></tr>";  
  12.      tbody += trs;         
  13.   });  
  14.   $("#project").append(tbody);  
  15. });  

 

 

 

一个完整的例子,向一个select添加元素

Html代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <script type="text/javascript" src="../js/jquery-1.6.js"></script>  
  6. </head>  
  7.   
  8. <body>  
  9. <script type="text/javascript">  
  10.     var cities = new Array({"id":1,"name":"nanjing"},{"id":2,"name":"shanghai"});  
  11.     function add(){  
  12.         var added = "";  
  13.         $.each(cities,function(n, value){  
  14.             //n表示下标  
  15.             var str = "";  
  16.             str = '<option id=' + value.id + ' value='+ '"' + value.name +  '">' + value.name + '</option>' + '<br/>';  
  17.             added += str;  
  18.         });  
  19.         //alert(added);  
  20.         $("#selector").append(added);  
  21.     }  
  22.   
  23.     function add2(){  
  24.         var added = '';  
  25.         for(var i = 0; i < cities.length; i++ ){  
  26.             var data = "";  
  27.             for(var k in cities[i]){  
  28.               if(typeof(cities[i][k])=="function"){    
  29.                  cities[i][k]();    
  30.               }else{    
  31.                 data +=  k + "=" +  cities[i][k] + ' ';    
  32.                }   
  33.             }  
  34.             added += data;  
  35.         }  
  36.         var select = document.getElementById("test");  
  37.         select.innerHTML = added;  
  38.     }  
  39.     $(function(){  
  40.         $("#add").click(function(){  
  41.             add();  
  42.         });  
  43.     });  
  44. </script>  
  45.     <button id="add">显示select</button><br/><br/>  
  46.     <select id="selector">  
  47.     </select>  
  48.     <div id="test">  
  49.     </div>  
  50.   
  51. </body>  
posted @ 2015-10-20 09:41  byronming  阅读(290)  评论(0)  编辑  收藏  举报