zoukankan      html  css  js  c++  java
  • jquery遍历json与数组方法总结

    来自:http://www.php100.com/html/program/jquery/2013/0905/5927.html

    先我们来参考each() 方法,each()规定为每个匹配元素规定运行的函数,返回 false 可用于及早停止循环

    语法

    $(selector).each(function(index,element))


      
    each处理一维数组

      var arr1 = [ "aaa", "bbb", "ccc" ];      
      $.each(arr1, function(i,val){      
          alert(i);   
          alert(val);
      });
      
    alert(i)将输出0,1,2
    alert(val)将输出aaa,bbb,ccc


    each处理二维数组 

      var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]      
      $.each(arr, function(i, item){      
          alert(i);   
          alert(item);      
      }); 
     


    arr2为一个二维数组,item相当于取这二维数组中的每一个数组。
    item[0]相对于取每一个一维数组里的第一个值   
    alert(i)将输出为0,1,2,因为这二维数组含有3个数组元素
    alert(item)将输出为  ['a', 'aa', 'aaa'],['b', 'bb', 'bbb'],['c', 'cc', 'ccc']

    遍历json

    [
     {
      "text" : "王家湾",
      "value" : "9"
     },
     {
      "text" : "李家湾",
      "value" : "10"
     },
     {
      "text" : "邵家湾",
      "value" : "13"
     }
    ]

    jquery代码


    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title></title>

    <script type="text/javascript" src="script/jquery-1.2.6.min.js"></script>
    <script type="text/javascript">
     $(document).ready(function(){
      $("#letter-e .button").click(function(){
       $.getJSON("e.json",function(data){
        $("#dictionary").empty();
        $.each(data,function(entryIndex,entry){
         var html = '<div class="entry">';
         html += '<div class="text">' + entry['text'] + '</div>';
         html += '<div class="value">' + entry['value'] + '</div>';
         html += '</div>';     
         $('#dictionary').append(html);
        });    
       });   
      });
     }); 
    </script>
    </head>
    <body>
    <div class="letters">
     <div class="letter" id="letter-e">
      <h3>E</h3>
      <div class="button">Load</div>
     </div>
    </div>
    <div id="dictionary">
    </div>
    </body>
    </html>

    一个完整的测试实例大家可参考
      
    <mce:script type="text/javascript"><!--  
    $(  
    function()  
    {  
    /* 
    通用例遍方法,可用于例遍对象和数组。 
    不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象。 
    回调函数拥有两个参数: 
        第一个为对象的成员或数组的索引 
        第二个为对应变量或内容 
    如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。 
    */  
    /*例遍数组,同时使用元素索引和内容。 
    $.each( [0,1,2], function(index, content){ 
      alert( "Item #" + index + " its value is: " + content ); 
    }); 
     
    var testPatterns =  
          [ 
            'yyyy', 
            'yy', 
            'MMMM', 
            'MMM', 
            'MM', 
            'M', 
            'dd', 
            'd', 
            'EEEE', 
            'EEE', 
            'a', 
            'HH', 
            'H', 
            'hh', 
            'h', 
            'mm', 
            'm', 
            'ss', 
            's', 
            'S', 
            'EEEE MMMM, d yyyy hh:mm:ss.S a', 
            'M/d/yy HH:mm' 
          ]; 
    $.each(testPatterns,function(){document.write('<div>'+this+'</div><br />');}); 
    */  
      
      
    /*遍历对象,同时使用成员名称和变量内容。 
    $.each( { name: "John", lang: "JS" }, function(index, content){ 
      //alert( "Object Name: " + index + ",And Its Value is: " + content ); 
      alert( "Object Property Name Is: " + index + ",And Its Property Value is: " + content ); 
    }); 
    */  
      
    /*例遍对象数组,同时使用成员变量内容。 
    var arr = [{ name: "John", lang: "JS" },{ name: "Nailwl", lang: "Jquery" },{ name: "吴磊", lang: "Ext" }]; 
    $.each( arr, function(index, content){ 
      alert( "The Man's No. is: " + index + ",And " + content.name + " is learning " + content.lang ); 
    }); 
    */  
      
    }  
    );  
    // --></mce:script>  
    <title>Jquery each Demo</title>  
    </head>  
      
    <body>  
      
    </body>  
    </html> 

  • 相关阅读:
    Rotation Kinematics
    离职 mark
    PnP 问题方程怎么列?
    DSO windowed optimization 代码 (4)
    Adjoint of SE(3)
    IMU 预积分推导
    DSO windowed optimization 代码 (3)
    DSO windowed optimization 代码 (2)
    OKVIS 代码框架
    DSO windowed optimization 代码 (1)
  • 原文地址:https://www.cnblogs.com/liujiale/p/5310486.html
Copyright © 2011-2022 走看看