• jQuery递归遍历JSON树,生成对应的ulli组合,形成树形菜单


    有如下JSON树形菜单数据,需要将其转换为对应的<ul><li>组合
    View Code
     1 var menulist = {
     2             "menulist": [
     3                 { "MID": "M001", "MName": "首页", "Url": "#", "menulist": "" },
     4                 { "MID": "M002", "MName": "车辆买卖", "Url": "#", "menulist":
     5                     [
     6                          { "MID": "M003", "MName": "新车", "Url": "#", "menulist":
     7                             [
     8                                 { "MID": "M006", "MName": "奥迪", "Url": "#", "menulist": "" },
     9                                 { "MID": "M007", "MName": "别克", "Url": "#", "menulist": "" }
    10                             ]
    11                          },
    12                          { "MID": "M004", "MName": "二手车", "Url": "#", "menulist": "" },
    13                          { "MID": "M005", "MName": "改装车", "Url": "#", "menulist": "" }
    14                     ]
    15                 },
    16                 { "MID": "M006", "MName": "宠物", "Url": "#", "menulist": "" }
    17           ]
    18         };
    可使用如下方法递归得到
    View Code
     1 $(function () {
     2             $("#btn_bianli").click(function () {
     3                 var showlist = $("<ul></ul>");
     4                 showall(menulist.menulist, showlist);
     5                 $("#div_menu").append(showlist);
     6             });
     7         });
     8 
     9         //menu_list为json数据
    10         //parent为要组合成html的容器
    11         function showall(menu_list, parent) {
    12             for (var menu in menu_list) {
    13                 //如果有子节点,则遍历该子节点
    14                 if (menu_list[menu].menulist.length > 0) {
    15                     //创建一个子节点li
    16                     var li = $("<li></li>");
    17                     //将li的文本设置好,并马上添加一个空白的ul子节点,并且将这个li添加到父亲节点中
    18                     $(li).append(menu_list[menu].MName).append("<ul></ul>").appendTo(parent);
    19                     //将空白的ul作为下一个递归遍历的父亲节点传入
    20                     showall(menu_list[menu].menulist, $(li).children().eq(0));
    21                 }
    22                 //如果该节点没有子节点,则直接将该节点li以及文本创建好直接添加到父亲节点中
    23                 else {
    24                    $("<li></li>").append(menu_list[menu].MName).appendTo(parent);
    25                 }
    26             }
    27         }
    稍微加上一点CSS就能形成无极菜单了,样式的东西下次再贴
  • 相关阅读:
    C#数组的Map、Filter、Reduce操作
    Safari中的input、textarea无法输入的问题
    小练手:用HTML5 Canvas绘制谢尔宾斯基三角形
    Web前端页面的浏览器兼容性测试心得(三)总结一些IE8兼容问题的解决方案
    大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画
    Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境
    Web前端页面的浏览器兼容性测试心得(一)搭建测试用本地静态服务器
    CSS3、SVG、Canvas、WebGL动画精选整理
    利用JS代码快速获得知网论文作为参考文献的引用文本
    使用Node.js快速搭建简单的静态文件服务器
  • 原文地址:https://www.cnblogs.com/hxhbluestar/p/2252009.html
Copyright © 2020-2023  润新知