JS遍历对象或者数组

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 on 2014-11-12 12:41  山冈龙  阅读(212)  评论(0)  编辑  收藏  举报

导航