• 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>  
  • 相关阅读:
    如何设置body高度为浏览器高度
    h5的video下载按钮如何隐藏
    微信小程序中的子父组件传值问题
    elementUI级联选择器2（选择及回显）编辑保存
    elementUI级联选择器（选择及回显）
    vue+elementUI 表格操作行的增删改查
    单独验证非form表单中的input（限制）
    JS中去除数组中的假值（0, 空，undefined, null, false）
    vue 组件之间的传值 （父子传值、兄弟传值）
    http协议的状态码
  • 原文地址：https://www.cnblogs.com/mingdep/p/4893829.html
Copyright © 2020-2023  润新知