jquery 读取 json树,并以ul展示

 <script type="text/javascript">       
        var menulist = {
                "menulist": [
                   { "MID": "M001", "MName": "首页", "Url": "TB_inline?height=580&amp;width=800&amp;inlineId=myOnPageContent", "children": "" },
                    { "MID": "M002", "MName": "车辆买卖", "Url": "#", "children":
                       [
                             { "MID": "M003", "MName": "新车", "Url": "#", "children":
                              [
                                   { "MID": "M006", "MName": "奥迪", "Url": "#", "children": "" },
                                 { "MID": "M007", "MName": "别克", "Url": "#", "children": "" }
                               ]
                             },
                             { "MID": "M004", "MName": "二手车", "Url": "#", "children": "" },
                            { "MID": "M005", "MName": "改装车", "Url": "#", "children": "" }
                        ]
                   },
                   { "MID": "M006", "MName": "宠物", "Url": "#", "children": "" }
              ]
            };
       
       
        $(function () {
                 var showlist = $("<ul></ul>");
                 showall(menulist.menulist, showlist);
                 $("#div_menu").append(showlist);
                 alert($("#div_menu").append(showlist).html());
         });

         //menu_list为json数据
        //parent为要组合成html的容器
        function showall(menu_list, parent) {
             for (var menu in menu_list) {
                 //如果有子节点,则遍历该子节点
                 if (menu_list[menu].children.length > 0) {
                    //创建一个子节点li
                     var li = $("<li></li>");
                     //拼接字符:<a href='#'>首页</a>
              //       var link = (menu_list[menu].Url=="#")?$("<a href='"+menu_list[menu].Url+"'>"+menu_list[menu].MName+"</a>"):$("<a href='"+menu_list[menu].Url+"' class='thickbox'>"+menu_list[menu].MName+"</a>");
                     var link = $("<a href='"+menu_list[menu].Url+"' class='thickbox'>"+menu_list[menu].MName+"</a>");
                     //将a附加到li里,并马上添加一个空白的ul子节点,并且将这个li添加到父亲节点中
                     $(li).append(link).append("<ul></ul>").appendTo(parent);
                     //将空白的ul作为下一个递归遍历的父亲节点传入
                     showall(menu_list[menu].children, $(li).children().eq(1));
                 }
                 //如果该节点没有子节点,则直接将该节点li以及文本创建好直接添加到父亲节点中
                 else {
                    //拼接字符:<a href='#'>首页</a>
                    var link = $("<a href='"+menu_list[menu].Url+"' class='thickbox'>"+menu_list[menu].MName+"</a>");
                    $("<li></li>").append(link).appendTo(parent);
                 }
             }
         }

      
 </script>

 

 

 

 <div  id="div_menu"></div>

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值