• jquery 遍历 json【转】


    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/

  • 相关阅读:
    javasrcipt array 码农
    touch事件与click事件 码农
    sqlite note 码农
    JSONP原理及自定义JSONP函数 码农
    阿里云ECS部署单机kafka 并对外提供服务(带认证)
    vue组件为什么要用data函数
    引导页的设置
    charles for centos 实现map local/map remote功能
    关于宝塔会自动上传网站访问数据的问题
    .Net 【Winform】 BackgroundWorker总结
  • 原文地址:https://www.cnblogs.com/whatlonelytear/p/6748742.html
Copyright © 2020-2023  润新知