JavaScript:创建嵌套UL的递归函数

JavaScript: Recursive function to create nested UL

本文关键字：递归函数 UL 嵌套 创建 JavaScript      更新时间：2023-09-26

我一直在尝试从以下数据创建嵌套UL：

[{"unique_id" : "UFID-06", "level" : "-3"}, 
 {"unique_id" : "UFID-05", "level" : "-2"}, 
 {"unique_id" : "UFID-04", "level" : "-1"}, 
 {"unique_id" : "UFID-03", "level" : "1"}, 
 {"unique_id" : "UFID-02", "level" : "2"},
 {"unique_id" : "UFID-01", "level" : "3"}];

但我在FireBug中收到了一条"递归太多"的消息。

我希望有人能在以下方面发现我的错误：

function process(data) {    
    var childDiv = document.createElement('div');
    for (var i in data) {
        var unique_id = data[i].unique_id;
        var level = data[i].level;
        var ul  = document.createElement('ul');
        var li  = document.createElement('li');
        var txt = document.createTextNode(unique_id + ' : ' + level);
        li.appendChild(txt);
        ul.appendChild(li);
        li.appendChild(txt);
        childDiv.appendChild(ul);
        process(data[i]);
    }
    return childDiv;
}

这是一把小提琴（https://jsfiddle.net/rt4gL1ff/2/）。请注意，下面的行被注释掉了，因为它在执行时会导致"太多递归"错误。

//parentDiv.appendChild(process(obj));

非常感谢！

process(data[i]); 没有停止条件

也可以使用递归函数完成任务

请试试这个：

var parentDiv = document.getElementById('parentDiv');
var obj = [{"unique_id" : "UFID-06", "level" : "-3"}, 
       {"unique_id" : "UFID-05", "level" : "-2"}, 
       {"unique_id" : "UFID-04", "level" : "-1"}, 
       {"unique_id" : "UFID-03", "level" : "1"}, 
       {"unique_id" : "UFID-02", "level" : "2"},
       {"unique_id" : "UFID-01", "level" : "3"}];
function process(data) {    
    var childDiv = document.createElement('div');
    var prevParent = childDiv; //initially the parent od all ul's should be div
    for (var i in data) {
       var unique_id = data[i].unique_id;
       var level = data[i].level;
       var ul  = document.createElement('ul');
       var li  = document.createElement('li');
       var txt = document.createTextNode(unique_id + ' : ' + level);
       li.appendChild(txt);
       ul.appendChild(li);
       prevParent.appendChild(ul);
       prevParent = ul; //update the parent ul to which the next elements are added
       //process(data,level+1);
   }
   return childDiv;
}
parentDiv.appendChild(process(obj));

检查小提琴https://jsfiddle.net/rt4gL1ff/6/

相关文章：