1. 程式人生 > >jQuery 迴圈遍歷物件/集合/陣列

jQuery 迴圈遍歷物件/集合/陣列

<!DOCTYPE html>
<html>
  <head>
    <title>demo01.html</title>    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  <!-- 下面的js放在這裡-->
 
 </HEAD>  
   
 <BODY>   
    <table cellpadding=5 cellspacing=1 width=620 id="tabledata" border="1" >  
            <tr>  
                <td>病區名稱</td>  
                <td>病區位置</td>                
            </tr>               
     </table>  
 </BODY>  
</html> 

1*****************遍歷物件*******************

   <!--
     1. 遍歷物件
           要求:物件要是JSON資料格式

          $.each(obj,function(n,value) { });  obj 是JSON格式的物件;n 是obj中子元素個數;value是obj的子元素,可以使用value.名稱 獲取!

   -->
 <script  type="text/javascript">  
     $(function(){  
       var tbody = "";      
    //遍歷物件  
    var obj =[{"name":"骨科病區","position":"3號樓6樓"}];  
      alert(obj);//是個object元素  
   //下面使用each進行遍歷  
   $.each(obj,function(n,value) {   
           alert(n+' '+value);  
           var trs = "";  
             trs += "<tr><td>" + value.name +"</td> <td>" + value.position +"</td></tr>";  
             tbody += trs;         
           });  
 
         $("#tabledata").append(tbody);  
       
  });  
  </script> 

2*****************遍歷集合:與遍歷一個物件沒有太大區別,只是格式上的問題******************

<script  type="text/javascript">  
     $(function(){  
       var tbody = "";      
    //遍歷集合
    var obj =[{"name":"骨科病區","position":"3號樓6樓"},{"name":"骨科病區","position":"3號樓6樓"},{"name":"骨科病區","position":"3號樓6樓"}];  
      alert(obj);//是個object元素  
   //下面使用each進行遍歷  
   $.each(obj,function(n,value) {   
           alert(n+' '+value);  
           var trs = "";  
             trs += "<tr><td>" + value.name +"</td> <td>" + value.position +"</td></tr>";  
             tbody += trs;         
           }); 
 
         $("#tabledata").append(tbody);  
       
  });  
  </script>

3***************遍歷陣列****************

 <script  type="text/javascript">  
     $(function(){  
       var tbody = "";     
         var anArray = ['one','two','three'];  
           $.each(anArray,function(n,value) {  
             
            alert(n+' '+value);  
           var trs = "";  
             trs += "<tr><td>" +value+"</td></tr>";  
              tbody += trs;  
            });  
 
         $("#tabledata").append(tbody);  
       
  });  
  </script> 

轉自:http://anybing.iteye.com/blog/1167670