js递归添加元素怎样防止重复添加？

Question

我有一串数据

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)这里，但是我不知道怎样修改它，请问这个问题要怎么解决？谢谢了。

Answer 1

好吧，我发现问题了

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是层层递进加一的，看到这我想到可能是这个问题，好吧，看来还是基础差了点。