jQuery递归遍历JSON树，生成对应的ul-li组合，形成树形菜单

有如下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就能形成无极菜单了，样式的东西下次再贴