jquery遍歷對象,數組,集合

時間 2019-11-12

原文原文鏈接

1.jquery 遍歷對象

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <script language="javascript" type="text/javascript" src="jquery.min.js"></script>
  <script  type="text/javascript">
     $(function(){

       var tbody = "";    
    //------------遍歷對象 .each的使用-------------
      //對象語法JSON數據格式(當服務器端回調回來的對象數據格式是json數據格式，必須保證JSON的格式要求，回調的對象必須使用eval函數進行轉化（不然將得不到Object）。本文不做詳細介紹服務器端回調的數據問題，咱們將直接自定義對象)
    var obj =[{"name":"項海軍","password":"123456"}];
   $("#result").html("------------遍歷對象 .each的使用-------------");
      alert(obj);//是個object元素
   //下面使用each進行遍歷
   $.each(obj,function(n,value) { 
           alert(n+' '+value);
           var trs = "";
             trs += "<tr><td>" + value.name +"</td> <td>" + value.password +"</td></tr>";
             tbody += trs;       
           });

         $("#project").append(tbody);
     
  });
  </script>
 </HEAD>
 
 <BODY>
     <div id="result" style="font-size:16px;color:red;"></div>
    <table cellpadding=5 cellspacing=1 width=620 id="project" border="1" >
            <tr>
                <th>用戶名</th>
                <th>密碼</th>              
            </tr>             
     </table>
 </BODY>
</HTML>


2.jQuery遍歷數組

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <script language="javascript" type="text/javascript" src="jquery.min.js"></script>
  <script  type="text/javascript">
     $(function(){

       var tbody = "";
    
     //------------遍歷數組 .each的使用-------------
           var anArray = ['one','two','three'];
     $("#result").html("------------遍歷數組 .each的使用-------------");
           $.each(anArray,function(n,value) {
           
            alert(n+' '+value);
           var trs = "";
             trs += "<tr><td>" +value+"</td></tr>";
              tbody += trs;
            });

          $("#project").append(tbody);

 //------------遍歷數組 .grep的使用-------------

grep()方法用於數組元素過濾篩選 
grep(array,callback,invert)
array：待過濾數組;
callback：處理數組中的每一個元素，並過濾元素，該函數中包含兩個參數，第一個是當前數組元素的值，一個是當前數組元素的下標，即元素索引值。此函數應返回一個布爾值。另外，此函數可設置爲一個字符串，當設置爲字符串時，將視爲「lambda-form」（縮寫形式？），其中 a 表明數組元素，i 表明元素索引值。如「a > 0」表明「function(a){ return a > 0; }」
invert：布爾型可選項，默認值false，值爲true或false， 若是 「invert」 爲 false 或爲設置，則函數返回數組中由過濾函數返回 true 的元素，當」invert」 爲 true，則返回過濾函數中返回 false 的元素集
function(){
        var array = [1,2,3,4,5,6,7,8,9];
        var filterarray = $.grep(array,function(value){
            return value > 5;//篩選出大於5的
        });
        for(var i=0;i<filterarray.length;i++){
            alert(filterarray[i]);
        }
        for (key in filterarray){
            alert(filterarray[key]);
        }
    }

//------------遍歷數組 .map的使用-------------

map() 把每一個元素經過函數傳遞到當前匹配集合中，生成包含返回值的新的 jQuery 對象。
因爲返回值是 jQuery 封裝的數組，使用 get() 來處理返回的對象以獲得基礎的數組。
.map() 方法對於得到或設置元素集的值特別有用。請思考下面這個帶有一系列複選框的表單
     
 var strings = ['0','1','2','3','4','S','6'];
        var values = $.map(strings,function(value){
                var result = new Number(value);
                return isNaN(result) ? null:result;//isNaN:is Not a Number的縮寫
            }
        );
        for (key in values) {
            alert(values[key]);
        }
    }
  });
  </script>
 </HEAD>
 
 <BODY>
    ------------此部分同1中的body部分--------------------

 </BODY>
</HTML>


3.jQuery 遍歷List集合（其實與遍歷一個對象沒有太大區別，只是格式上的問題）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <script language="javascript" type="text/javascript" src="jquery.min.js"></script>
  <script  type="text/javascript">
     $(function(){

       var tbody = "";
    
     //------------遍歷List集合 .each的使用-------------
      var obj =[{"name":"項海軍","password":"123456"},{"name":"科比","password":"333333"}];
    $("#result").html("遍歷List集合 .each的使用");
      alert(obj);//是個object元素
   //下面使用each進行遍歷
   $.each(obj,function(n,value) { 
           alert(n+' '+value);
       var trs = "";
             trs += "<tr><td>" +value.name+"</td> <td>" + value.password +"</td></tr>";
             tbody += trs;       
           });
         $("#project").append(tbody);
     
  });
  </script>
 </HEAD>
 
 <BODY>
       ------------此部分同1中的body部分--------------------

 </BODY>
</HTML>