zoukankan      html  css  js  c++  java
  • jquery 遍历对象、数组、集合

    转:http://blog.sina.com.cn/s/blog_5db0dfe40100hay7.html

    使用了jquery有段时间了,整理下jquery中的遍历问题。

    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);
         
      });
      </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>

  • 相关阅读:
    Java RunTime Environment (JRE) or Java Development Kit (JDK) must be available in order to run Eclipse. ......
    UVA 1597 Searching the Web
    UVA 1596 Bug Hunt
    UVA 230 Borrowers
    UVA 221 Urban Elevations
    UVA 814 The Letter Carrier's Rounds
    UVA 207 PGA Tour Prize Money
    UVA 1592 Database
    UVA 540 Team Queue
    UVA 12096 The SetStack Computer
  • 原文地址:https://www.cnblogs.com/kailing-con/p/4268258.html
Copyright © 2011-2022 走看看