• 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> 

  • 相关阅读:
    随机生成字符串,可用来当id
    自己总结的关于uniapp项目用androidstuido打包成apk
    css3 滑动效果 门
    在数组里面随机获取随机的几个内容
    把一个数组分割成两个(不管奇数还是偶数)
    Mysql常用命令
    怎样才能彻底地删除多余输入法软件
    启动MySQL服务
    linux监控命令全覆盖
    浅谈MVC模式与SSH框架
  • 原文地址:https://www.cnblogs.com/liujiale/p/5310486.html
Copyright © 2020-2023  润新知