jquery遍历数组、集合、对象

ゝ一世哀愁。 2022-07-24 05:27 204阅读 0赞

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

1.  </HTML>

文章来源 http://anybing.iteye.com/blog/1167670