惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Cisco Talos Blog
Cisco Talos Blog
阮一峰的网络日志
阮一峰的网络日志
云风的 BLOG
云风的 BLOG
D
Docker
Vercel News
Vercel News
IT之家
IT之家
Recent Announcements
Recent Announcements
Last Week in AI
Last Week in AI
V
Visual Studio Blog
Engineering at Meta
Engineering at Meta
腾讯CDC
Google DeepMind News
Google DeepMind News
I
InfoQ
博客园 - 三生石上(FineUI控件)
Apple Machine Learning Research
Apple Machine Learning Research
The GitHub Blog
The GitHub Blog
博客园 - Franky
The Cloudflare Blog
A
About on SuperTechFans
有赞技术团队
有赞技术团队
Y
Y Combinator Blog
T
Tenable Blog
P
Proofpoint News Feed
Recorded Future
Recorded Future
Security Latest
Security Latest
H
Hackread – Cybersecurity News, Data Breaches, AI and More
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
博客园 - 聂微东
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Google Online Security Blog
Google Online Security Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Simon Willison's Weblog
Simon Willison's Weblog
The Last Watchdog
The Last Watchdog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
N
News and Events Feed by Topic
TaoSecurity Blog
TaoSecurity Blog
U
Unit 42
The Hacker News
The Hacker News
Martin Fowler
Martin Fowler
T
Threat Research - Cisco Blogs
NISL@THU
NISL@THU
F
Full Disclosure
M
MIT News - Artificial intelligence
人人都是产品经理
人人都是产品经理
Hugging Face - Blog
Hugging Face - Blog
V
V2EX
Project Zero
Project Zero

博客园 - 团团ta爸

SQLSERVER吞噬内存解决记录 ASP.NET MVC 自定义路由中几个需要注意的小细节 新书出炉了,《asp.net4+jQuery 构建信息门户网站》,全程录屏,谢谢支持! HTML+CSS+Javascript教学视频【0409更新】 解决MSSQL全文检索不支持office2007,2010中docx等格式的问题 不写东西的这几年 4月27日顶尖Windows内核技术大师David A. Solomon与您相约上海 上海.NET俱乐部10月份活动 关于企业软件资质申请流程以及时间规划(二)——软件登记测试 使用Rose2003进行数据库建模并导入SQLServer2000的图解详细过程 关于企业软件资质申请流程以及时间规划(一)——软件著作权申请 写了个小程序,方便大家编程(QuickDog,快捷键帮手) 在VS.NET2005中使用java代码段以及SOL文件格式的解析 C++20周年大庆摘记 使用Hook(钩子)阻止Flash启动浏览器打开URL 2005年8月13日 上海.NET俱乐部第一次活动纪实 已经发布,资料提供下载 你为什么不用Flash做程序的表示层呢? 用于Blog的天气预报服务-改进2005-08-06 工作一周年祭
jQuery递归遍历JSON树,生成对应的ul-li组合,形成树形菜单
团团ta爸 · 2011-11-17 · via 博客园 - 团团ta爸

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