问题:在一个盒子中遍历结构,
let arr = [
{
name: "a",
children: [
{
name: "a-1",
children: [
{
name: "a-1-1",
children: [
{
name: "a-1-1-1",
}
]
}
]
}
]
},
{
name: "b",
children: [
{
name: "b-1",
}
],
},
{
name: "c",
},
{
name: "d",
children: [
{
name: 'd-1',
}
]
},
]
1.创建函数, 2.遍历整个结构, 3.创建ul节点 4.创建li节点,并将第一项放入 5.将li放入ul中 6.将ul放入盒子中 7.调用函数
function creatMenu(data, con) {
let ul = $('<ul/>') //创建ul
data.forEach(item => {
let li = $('<li/>').text(item.name)//创建li,并将item.name值放入li中
});
con.append(ul)//将ul放入con中
}
creatMenu(arr, $('.container')) //调用函数,
若其中有children,则需再次调用
function creatMenu(data, con) {
let ul = $('<ul/>') //创建ul
data.forEach(item => {
let li = $('<li/>').text(item.name)//创建li,并将item.name值放入li中
if (item.children)
creatMenu(item.children, li)
ul.append(li)//将li放入ul中
});
con.append(ul)//将ul放入con中
}
creatMenu(arr, $('.container')) //调用函数,
结果:
