jQuery遍历对象/数组/集合

  1. 转载自: 网络  
  2.     
  3. 1.jquery 遍历对象  
  4.   
  5. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  6. <HTML>  
  7.  <HEAD>  
  8.   <TITLE> New Document </TITLE>  
  9.   <script language="javascript" type="text/javascript" src="jquery.min.js"></script>  
  10.   <script  type="text/javascript">  
  11.      $(function(){  
  12.   
  13.        var tbody = "";      
  14.     //------------遍历对象 .each的使用-------------  
  15.       //对象语法JSON数据格式(当server端回调回来的对象数据格式是json数据格式，必须保证JSON的格式要求，回调的对象必须使用eval函数进行转化（否则将得不到Object）。本文不作具体介绍server端回调的数据问题，我们将直接自己定义对象)  
  16.     var obj =[{"name":"项海军","password":"123456"}];  
  17.    $("#result").html("------------遍历对象 .each的使用-------------");  
  18.       alert(obj);//是个object元素  
  19.    //以下使用each进行遍历  
  20.    $.each(obj,function(n,value) {   
  21.            alert(n+' '+value);  
  22.            var trs = "";  
  23.              trs += "<tr><td>" + value.name +"</td> <td>" + value.password +"</td></tr>";  
  24.              tbody += trs;         
  25.            });  
  26.   
  27.          $("#project").append(tbody);  
  28.        
  29.   });  
  30.   </script>  
  31.  </HEAD>  
  32.    
  33.  <BODY>  
  34.      <div id="result" style="font-size:16px;color:red;"></div>  
  35.     <table cellpadding=5 cellspacing=1 width=620 id="project" border="1" >  
  36.             <tr>  
  37.                 <th>username</th>  
  38.                 <th>password</th>                
  39.             </tr>               
  40.      </table>  
  41.  </BODY>  
  42. </HTML>  
  43.   
  44.   
  45. 2.jQuery遍历数组  
  46.   
  47. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  48. <HTML>  
  49.  <HEAD>  
  50.   <TITLE> New Document </TITLE>  
  51.   <script language="javascript" type="text/javascript" src="jquery.min.js"></script>  
  52.   <script  type="text/javascript">  
  53.      $(function(){  
  54.   
  55.        var tbody = "";  
  56.       
  57.      //------------遍历数组 .each的使用-------------  
  58.            var anArray = ['one','two','three'];  
  59.      $("#result").html("------------遍历数组 .each的使用-------------");  
  60.            $.each(anArray,function(n,value) {  
  61.              
  62.             alert(n+' '+value);  
  63.            var trs = "";  
  64.              trs += "<tr><td>" +value+"</td></tr>";  
  65.               tbody += trs;  
  66.             });  
  67.   
  68.           $("#project").append(tbody);  
  69.        
  70.   });  
  71.   </script>  
  72.  </HEAD>  
  73.    
  74.  <BODY>  
  75.     ------------此部分同1中的body部分--------------------  
  76.   
  77.  </BODY>  
  78. </HTML>  
  79.   
  80.   
  81. 3.jQuery 遍历List集合（事实上与遍历一个对象没有太大差别，仅仅是格式上的问题）  
  82.   
  83. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  84. <HTML>  
  85.  <HEAD>  
  86.   <TITLE> New Document </TITLE>  
  87.   <script language="javascript" type="text/javascript" src="jquery.min.js"></script>  
  88.   <script  type="text/javascript">  
  89.      $(function(){  
  90.   
  91.        var tbody = "";  
  92.       
  93.      //------------遍历List集合 .each的使用-------------  
  94.       var obj =[{"name":"项海军","password":"123456"},{"name":"科比","password":"333333"}];  
  95.     $("#result").html("遍历List集合 .each的使用");  
  96.       alert(obj);//是个object元素  
  97.    //以下使用each进行遍历  
  98.    $.each(obj,function(n,value) {   
  99.            alert(n+' '+value);  
  100.        var trs = "";  
  101.              trs += "<tr><td>" +value.name+"</td> <td>" + value.password +"</td></tr>";  
  102.              tbody += trs;         
  103.            });  
  104.          $("#project").append(tbody);  
  105.        
  106.   });  
  107.   </script>  
  108.  </HEAD>  
  109.    
  110.  <BODY>  
  111.        ------------此部分同1中的body部分--------------------  
  112.   
  113.  </BODY>  
  114. </HTML>  

posted on 2017-07-01 15:49  wgwyanfs  阅读(483)  评论(0)  编辑  收藏  举报

导航