我有一串数据
data = [
{
id: "01",
name: "上海",
content: "上海是个是个好地方",
isleaf: false,
children: [
{
parent: "01",
id: "01-1",
name: "黄浦",
content: "黄浦是个是个好地方",
isleaf: true
},
{
parent: "01",
id: "01-2",
name: "静安",
content: "静安是个是个好地方",
isleaf: true
},
{
parent: "01",
id: "01-3",
name: "普陀",
content: "普陀是个是个好地方",
isleaf: true
}
]
},
{
id: "02",
name: "北京",
content: "北京是个是个好地方",
isleaf: false,
children: [
{
parent: "02",
id: "02-1",
name: "朝阳",
content: "朝阳是个是个好地方",
isleaf: true
},
{
parent: "02",
id: "02-2",
name: "东城",
content: "东城是个是个好地方",
isleaf: true
}
]
}
]页面结构如下
<div id="tree">
<section class="left"></section>
<section class="right"></section>
</div>我想通过一个函数生成一段二级导航，但是这个函数有问题，函数如下：
function buildTree (data, parent) {
var dom = '';
for(var i=0; i<data.length; i++) {
var ul = $('<ul></ul>');
dom += '<li id="'+data[i].id+'"><a href="###" data-content="'+data[i].content+'">'+data[i].name+'</a></li>';
ul.append(dom);
//parent.find('ul:first').remove();
parent.append(ul);
if(!data[i].isleaf) {
buildTree (data[i].children, $('#'+data[i].id));
} else {
}
}
console.log(dom);
}
buildTree(data, $('.left'))输出结果重复计算了
我知道问题出在parent.append(ul)这里，但是我不知道怎样修改它，请问这个问题要怎么解决？谢谢了。
好吧，我发现问题了
function buildTree (data, parent) {
for(var i=0; i<data.length; i++) {
var ul = $('<ul></ul>');
var dom = '';
dom += '<li id="'+data[i].id+'"><a href="###" data-content="'+data[i].content+'">'+data[i].name+'</a></li>';
ul.html(dom);
parent.append(ul);
if(!data[i].isleaf) {
buildTree (data[i].children, $('#'+data[i].id));
} else {
}
}
console.log(dom);
}只要把dom也放到for循环里就行了，我居然看了半天。
我后来打开f12,发现上海的下面实际上是三个ul,然后每个ul里面的li是层层递进加一的，看到这我想到可能是这个问题，好吧，看来还是基础差了点。