• 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
  • 相关阅读:
    上班5个月总结
    使用余弦定理计算两篇文章的相似性
    9月10日 小结
    软件测试
    《增长黑客》笔记
    统计学术语
    数据分析师:数据分析工作常见七种错误及其规避技巧(转自经管之家)
    输入一个日期,计算这个日期与 2018-03-12差多少天;
    求输入数字的阶乘 及加和 #s=1!+2!+3!+…..+n!
    列表去重
  • 原文地址:https://www.cnblogs.com/shsgl/p/4091923.html
Copyright © 2020-2023  润新知