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

我有一串数据

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'))

输出结果重复计算了

clipboard.png

我知道问题出在parent.append(ul)这里,但是我不知道怎样修改它,请问这个问题要怎么解决?谢谢了。

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏