Question

我试图通过设置节点（索引）进行递归来渲染类似层次结构的树。我已经知道了根（顶部）。有多个根元素。我试图在变量树中收集整个html（这整个html将在以后附加到div）

tree = "";
top = ["1", "11", "14", "17", "72", "73", "74", "78", "79", "98", "99"];
index = {
    1: {
        'name': "Node 1",
        'children': "2,3,4,5,6,7,8,9,10"
    },
    2: {
        'name': "Node 2",
        'children': ""
    },

//.... goes all the way upto 99
}

递归函数makeFT（index，roots）在遍历“top”数组中第一个元素的子元素后似乎只会中断。

此代码位于jsbin及以下。可能是什么问题呢？有一个更好的方法吗？任何帮助表示赞赏。

makeFT(index, top);


function makeFT(index, roots) {
    console.log(roots);
    tree == "" ? tree += '<ul>' : tree += '<ul><hr/>'
    for (i = 0; i < roots.length; ++i) {
        n = parseInt(roots[i]);
        //console.log(n);
        //console.log(index[n]);

        tree += '<li>' + roots[i] + '</span>' + index[n].name;

        if (index[n].children === "") {
            tree += '<input class="leaf tree-first-input" type="text" size="2">'
        }
        else {
            tree += '<input class="non-leaf tree-first-input" type="text" size="2">'
            makeFT(index, index[n].children.split(","));
        }
        tree += "</li>"
    }
    tree += '</ul><br/>'

}

更新：原来这是一个范围问题，而不是递归问题。递归没问题。由于在循环遍历根数组时没有定义变量'i'的范围，因此每个后续的递归函数都继承了unscoped'i'的值，从而产生了问题。

Answer 1

在函数内添加var i = 0。你有问题的范围问题。

http://jsbin.com/ugoju4/12/edit

Answer 2

您没有从递归函数返回任何内容。

  }
        else {
            tree += '<input class="non-leaf tree-first-input" type="text" size="2">'
            tree += makeFT(index, index[n].children.split(","));
        }
        tree += "</li>"
    }
    tree += '</ul><br/>'
    return tree;
 }

这应该给你价值。使用它通过Id将其写入元素。更新了jsfiddle

Answer 3

top是一个全局变量，指的是当前帧集的“顶部”窗口。使用其他变量名称。

Answer 4

为什么你在for-statement中键入“++ i”？使用“i ++”
您正在输入

index [n] .children ===“”

尝试

index[n].children == ""

我认为他从未参与其他部分。

Javascript递归函数似乎在第一次传递后退出

4 个答案: