var data = [
{id: '1',name: '1',parentId: null,},
{id: '2',name: '1-1',parentId: '1', },
{id: '3',name: '1-2',parentId: '1',},
{id: '4',name: '2',parentId: null,},
{id: '5',name: '2-1',parentId: '4',},
{id: '6',name: '2-2',parentId: '4',},
{id: '7',name: '2-2-1',parentId: '6',}
]
function fn(data, rootId = null) {
const children = []
data.forEach(item => {
if (item.parentId === rootId) {
children.push(item)
item.children = fn(data, item.id)
}
});
return children
}
const data1 = fn(data, null)
function digui(data1) {
if (!data1) {
return ''
}
var html = '<ul >';
for (var i = 0; i < data1.length; i++) {
html += '<li>' + data1[i].name;
html += digui(data1[i].children);
html += '</li>\n';
};
html += '</ul>';
return html;
}
const html = digui(data1)
document.getElementsByClassName("list")[0].innerHTML = html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异