jquery 遍历 json

<HTML>

<HEAD>

<meta http-equiv="content-Type" content="text/html;charset=utf-8">

<TITLE></TITLE>

<style></style>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">

    <!--json  Data-->

var menulist = {

            "name":"bobo",

             "menulist": [

                 { "MID": "M001", "MName": "首页", "Url": "#", "menulist": "" },

                 { "MID": "M002", "MName": "车辆买卖", "Url": "#", "menulist":

                     [

                          { "MID": "M003", "MName": "新车", "Url": "#", "menulist":

                             [

                                 { "MID": "M006", "MName": "奥迪", "Url": "#", "menulist": "" },

                                 { "MID": "M007", "MName": "别克", "Url": "#", "menulist": "" }

                             ]

                          },

                          { "MID": "M004", "MName": "二手车", "Url": "#", "menulist": "" },

                          { "MID": "M005", "MName": "改装车", "Url": "#", "menulist": "" }

                     ]

                 },

                 { "MID": "M006", "MName": "宠物", "Url": "#", "menulist": "" }

           ]

         };

<!--js  Code-->

 $(function () {

     $("#btn_bianli").click(function () {

     });

     var showlist = $("<ul></ul>");

     showall(menulist.menulist, showlist);

     $("#div_menu").append(showlist);

 });

 //menu_list为json数据

 //parent为要组合成html的容器

 function showall(menu_list, parent) {

     for (var index in menu_list) {

         //如果有子节点，则遍历该子节点

         if (menu_list[index].menulist.length > 0) {

             //创建一个子节点li

             var li = $("<li></li>");

             var ul = $("<ul></ul>");

             //将li的文本设置好，并马上添加一个空白的ul子节点，并且将这个li添加到父亲节点中

             $(li).append(menu_list[index].MName).append(ul).appendTo(parent);

             //将空白的ul作为下一个递归遍历的父亲节点传入

             showall(menu_list[index].menulist, ul);

         }

         //如果该节点没有子节点，则直接将该节点li以及文本创建好直接添加到父亲节点中

         else {

            $("<li></li>").append(menu_list[index].MName).appendTo(parent);

         }

     }

 }

</script>

</HEAD>

<BODY>

    <button id="btn_bianli">#btn_bianli</button>

    <div id="div_menu" class="tree well"></div>

</BODY>

</HTML>

显示效果

完全引用自: http://blog.163.com/hks_blog/blog/static/21492609020151113344248/

jquery 遍历 json【转】的更多相关文章

  1. JQuery遍历json数组的3种方法

    这篇文章主要介绍了JQuery遍历json数组的3种方法,本文分别给出了使用each.for遍历json的方法,其中for又分成两种形式,需要的朋友可以参考下 一.使用each遍历 $(functio ...

  2. 【转】 jquery遍历json数组方法

    $(function () { var tbody = ""; //------------遍历对象 .each的使用------------- //对象语法JSON数据格式(当服 ...

  3. jquery遍历json与数组方法总结

    来自:http://www.php100.com/html/program/jquery/2013/0905/5927.html 先我们来参考each() 方法,each()规定为每个匹配元素规定运行 ...

  4. JS/Jquery遍历JSON对象、JSON数组、JSON数组字符串、JSON对象字符串

    JS遍历JSON对象 JS遍历JSON对象 <script> var obj = { "goodsid": "01001", "goods ...

  5. jQuery 遍历json数组的实现代码

    <script type="text/javascript"> "}]; $(d1).each(function(){ alert(this.text+&qu ...

  6. jquery遍历json的几种方法

    for循环: 1 <script> 2 var obj = { 3 "status":1, 4 "bkmsg":"\u6210\u529f ...

  7. jQuery遍历Json数组

    var jsonArray=  [{ "name": "张三", "password": "123456"},{ &qu ...

  8. jQuery遍历json

    使用 each var anObject = {one:1,two:2,three:3}; $.each(anObject,function(name,value) { alert(name); al ...

  9. jQuery 遍历 json 方法大全

    1.for循环: var obj = { "status":1, "bkmsg":"\u6210\u529f", "bkdata& ...

随机推荐

  1. [转帖]/etc/security/limits.conf的含义

    https://www.cnblogs.com/pzk7788/p/7250723.html /etc/security/limits.conf 是 Linux 资源使用配置文件,用来限制用户对系统资 ...

  2. [安全]appscan 使用代理抓取其他客户端的请求

    自己安全测试技能很低, 上级给的安全测试的任务给了自动化组的同事来做, 自己之前使用appscan的时候 只知道使用appscan的内置浏览器测试抓取请求 今天与自动化美女同事沟通发现有一个代理的功能 ...

  3. Windows server 2008 r2下载地址和激活破解方法

    Windows 7发布了服务器版本——Windows Server 2008 R2.同2008年1月发布的Windows Server 2008相比,Windows Server 2008 R2继续提 ...

  4. Java DateUtils 的实用

    Java DateUtils的实用可以很方便的对日期进行对年,月,日,时,分,秒的相加和相减,能很好的解决日期的运算 可以不用必须调用Oracle等数据库本地函数进行运算,相比之下更为简洁方便. pa ...

  5. BZOJ3589 动态树（树链剖分+容斥原理）

    显然容斥后转化为求树链的交.这个题非常良心的保证了查询的路径都是到祖先的,求交就很休闲了. #include<iostream> #include<cstdio> #inclu ...

  6. LAMP和LNMP去除index.php访问

    使用TP或者Laravel开发的时候,后时候会遇到需要加index.php才能正常访问 LAMP解决方法 1.修改配置 打开配置文件(如:httpd.conf),找到你网站根目录的配置,将AllowO ...

  7. HDU4296-ChengduOnling-贪心

    某人要搬砖盖一栋楼,有m块砖,每块有两个值w和s,表示重量和强度.楼盖好后每块砖有一个危险值,表示为此砖之上的砖的重量和减此砖的强度,即Σ0(j-1)w - sj. 整体危险值是每块砖危险值的最大值. ...

  8. Java11实战：模块化的 Netty RPC 服务项目

    Java11实战:模块化的 Netty RPC 服务项目 作者:枫叶lhz链接:https://www.jianshu.com/p/19b81178d8c1來源:简书简书著作权归作者所有,任何形式的转 ...

  9. THUWC2018酱油记

    Day 0 今年的THUWC在我们学校,听说有pretest,感觉有不好的预感.... Day 1 早上7:00在校门口集合,车7:30以后才到,感觉就像在围观 期末考试.来到雅礼洋湖,在这里看到了初 ...

  10. 2073: [POI2004]PRZ

    2073: [POI2004]PRZ Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 284  Solved: 213[Submit][Status][D ...