Javascript 对a中的对象进行排序<；ul>；使用值来嵌套它

我有点困惑如何做这个排序任务

我有一个如下所示的对象数组：

{
name : "Another Second level code",
id : "aslc",
parent : "flc"
}

还有一些（有关完整的代码，请参阅）

每个项目都有一个父代码。我想创建一个

列表，其中每个条目都会以嵌套的层次结构将其父代码附加到条目中

我是从这个开始的

for (i = 0; i < data.length; i++) {
    if (data[i].parent === "none"){
    $("#firstLevel").append("<li id="+data[i].id +">"+data[i].id+"   </li>");
    firstLevelArray.push(data[i].id);
    }

for（i=0；i”+data[i].id+”””）；
firstLevelArray.push（数据[i].id）；
}

}

它开始工作得很好，创建了一个根条目的初始列表，其中父条目为“none”

然后，我将这个结构添加到同一个循环中，尝试将另一个子列表添加到主代码中，该子列表中的条目将主代码作为父项。这不管用。我的意思是，如果在第一级数组中找到了条目的父项，那么该条目应该作为列表附加到父项的条目中

if (firstLevelArray.index(data[i].parent !== -1)) {
    $("'#"+data[i].parent+"'").append("<ul><li id="+data[i].id +">"+data[i].id+"</li></ul>");
    }

if（firstLevelArray.index（数据[i].parent！=-1））{
$（“#”+data[i].parent+”）.append（“
”+data[i].id+””）；
}

虽然我过去做过一些JS的事情，但我在这类排序任务中从来都不是很强。。。是否有某种方法可以以更简单的方式实现此排序

请尝试以下方法：

(function rec(rdata) {
    if(!rdata.length) return;
    //Get and Remove the first element in the array
    var d = rdata.shift();
    //If is root just appended it to the list
    if(d.parent === 'none') {
         $("#firstLevel").append("<li id="+d.id +">"+d.id+"</li>");
    //If 'sub element' and its parent is rendred just append it to its parent 
    } else if($("#"+d.parent).length > 0 ) {
        if($("#"+d.parent).find("> ul").length === 0) {
            $("#"+d.parent).append("<ul></ul>");
        }
        $("#"+d.parent+" > ul").append("<li id="+d.id +">"+d.id+"   <ul></ul></li>");
    //If is a 'sub element' and its parent not rendred yet just delay
    //the rendering by pushing back the element to data
    }else {    
        //delay
        rdata.push(d);
    }
    //Handle the next subset of data
    rec(rdata);
})(data);

（函数记录（rdata）{
如果（！rdata.length）返回；
//获取并删除数组中的第一个元素
var d=rdata.shift（）；
//如果是root，则将其附加到列表中
如果（d.parent=='none'）{
$（“#firstLevel”）.append（“
”+d.id+”
”）；
//如果“sub-element”及其父元素是rendred，只需将其附加到其父元素即可
}else if（$（“#”+d.parent）.length>0）{
if（$（“#”+d.parent）.find（“>ul”）.length==0）{
$（“#”+d.parent）。追加（“
”）；
}
$（“#“+d.parent+”>ul”）.append（“
”+d.id+”
/li>”）；
//If是一个“子元素”，其父元素尚未渲染，只是延迟
//通过将元素推回数据进行渲染
}否则{
//耽搁
数据推送（d）；
}
//处理数据的下一个子集
rec（rdata）；
})（数据）；

演示：

请尝试以下操作：

(function rec(rdata) {
    if(!rdata.length) return;
    //Get and Remove the first element in the array
    var d = rdata.shift();
    //If is root just appended it to the list
    if(d.parent === 'none') {
         $("#firstLevel").append("<li id="+d.id +">"+d.id+"</li>");
    //If 'sub element' and its parent is rendred just append it to its parent 
    } else if($("#"+d.parent).length > 0 ) {
        if($("#"+d.parent).find("> ul").length === 0) {
            $("#"+d.parent).append("<ul></ul>");
        }
        $("#"+d.parent+" > ul").append("<li id="+d.id +">"+d.id+"   <ul></ul></li>");
    //If is a 'sub element' and its parent not rendred yet just delay
    //the rendering by pushing back the element to data
    }else {    
        //delay
        rdata.push(d);
    }
    //Handle the next subset of data
    rec(rdata);
})(data);

（函数记录（rdata）{
如果（！rdata.length）返回；
//获取并删除数组中的第一个元素
var d=rdata.shift（）；
//如果是root，则将其附加到列表中
如果（d.parent=='none'）{
$（“#firstLevel”）.append（“
”+d.id+”
”）；
//如果“sub-element”及其父元素是rendred，只需将其附加到其父元素即可
}else if（$（“#”+d.parent）.length>0）{
if（$（“#”+d.parent）.find（“>ul”）.length==0）{
$（“#”+d.parent）。追加（“
”）；
}
$（“#“+d.parent+”>ul”）.append（“
”+d.id+”
/li>”）；
//If是一个“子元素”，其父元素尚未渲染，只是延迟
//通过将元素推回数据进行渲染
}否则{
//耽搁
数据推送（d）；
}
//处理数据的下一个子集
rec（rdata）；
})（数据）；

---

演示：

您可以使用

jsTree

“然后我添加到同一个循环”轻松完成类似的操作-如果原始数组数据没有任何特定顺序，则需要在开始创建元素之前对其进行排序，或者使用第二个循环测试具有父元素的元素，否则，在将父元素添加到

firstLevelArray

之前，您可能正在处理一些子元素。感谢@nnnnnn，这是我没有考虑到的一点。使用

jsTree

“然后我添加到同一个循环”可以轻松完成类似的操作-如果原始数组数据不是按任何特定顺序排列的，则需要在开始创建元素之前对其进行排序，或者对具有父元素的元素使用第二次循环测试，否则在将父元素添加到

firstLevelArray

之前，您可能正在处理一些子元素。谢谢@nnnnnn，这是我没有考虑过的一点，谢谢。也许我最终使用了注释中建议的jsTree解决方案，但我非常有兴趣看到它如何手动执行，并且您的代码非常清晰易懂。这是一个很好的解决方案。如果有一个孤立的子元素，它将尝试永远递归并崩溃，不是吗？你是对的！我没有注意到这一点，我编写的代码就像“必须工作——我累了”！我会看看我能做什么！欢迎提出建议。附：链接修复谢谢。也许我最终使用了注释中建议的jsTree解决方案，但我非常有兴趣看到它如何手动执行，并且您的代码非常清晰易懂。这是一个很好的解决方案。如果有一个孤立的子元素，它将尝试永远递归并崩溃，不是吗？你是对的！我没有注意到这一点，我编写的代码就像“必须工作——我累了”！我会看看我能做什么！欢迎提出建议。PS：链接已固定