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

有如下JSON树形菜单数据，需要将其转换为对应的<ul><li>组合

 
   
    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         }; 
   
 

可使用如下方法递归得到

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