现在的位置: 首页 > 综合 > 正文

jQuery遍历对象/数组/集合

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

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞