思路
变化的只有数据和容器，结构相似，每次更改两者即可，所以设置两个参数放置这两个变化的数据。
第一次把容器是box，数据是arr，传入函数中，生成ul以及li，放置最外层的数据，同时监测数据是否有children这个属性，如果有则把有children的数据和对应的li当作参数，继续调用函数。
然后就是继续重复此过程……直到遍历完所有数据，类似于套娃。（禁止套娃！）
数据
要把这个👇
let arr = [
{
name: 'a',
children: [
{
name: 'a-1',
children: [
{
name: 'a-1-1',
children: [
{
name: 'a-1-1-1'
}
]
},
{
name: 'a-1-2',
children: [
{
name: 'a-1-2-1'
}
]
}
]
}
]
},
{
name: 'b',
children: [
{
name: 'b-1'
},{
name: 'b-2'
}
]
},
{
name: 'c',
},
]
最终结果
变成这个👇
函数代码
就得用这个👇
function taowa2(data,con){
let ul = $('<ul/>')
$.each(data, function (i, item) {
let li = $('<li/>').text(item.name)
if (item.children) {
taowa2(item.children,li)
}
ul.append(li)
});
con.append(ul)
}
taowa2(arr,box)
html里还得放个.box当作容器
最后生成的页面结构
