• jquery 遍历对象、数组、集合_项海军_新浪博客


    jquery 遍历对象、数组、集合_项海军_新浪博客


      使用了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>

  • 相关阅读:
    刷脸背后:人脸检测人脸识别人脸检索_张重生资料整理
    webpack工具
    js精度缺失和最大安全整数
    在线文档预览(干货篇)
    讨论js比较两个数组(对象)是否相等的范围
    js不同数据类型中==与===的对比
    js中this的指向
    前后端数据类型
    js网页节点操作
    圆角渐变边框实现
  • 原文地址:https://www.cnblogs.com/lexus/p/2472979.html
Copyright © 2020-2023  润新知