Javascript 嵌套数组中的嵌套无序列表（递归）

我有一些代码可以在嵌套数组中循环（它的深度可以是无限的），我正试图从中生成树状结构。。基本上嵌套的无序列表

这是我的小提琴

我在如下函数中收集项目名称：

function get_list( a ) {
    for (var i = 0; i < a.length; i++) {
         console.log( i + "---" + a[i].name );

         $(".mod-list ul").append('<li>' + a[i].name + '</li>');

         get_list( a[i].group );
     }
}

get_list( mods.group );

函数获取列表（a）{
对于（变量i=0；i”+a[i].name+”）；
获取_列表（a[i].组）；
}
}
获取_列表（mods.group）；

我的示例html很简单

<h4>Nested List</h4>
<div class="mod-list">

    <ul class="list">

    </ul>

</div>

嵌套列表

目前，我将所有项作为li追加到单个无序列表中，但我需要创建嵌套无序列表，以准确反映数组嵌套

有人能帮我解决这个问题吗

谢谢

这个呢：

function get_list( a, $parent ) {
    var newUl = $("<ul></ul>");
    for (var i = 0; i < a.length; i++) {
        if (a[i]) {
            newUl.append('<li>' + a[i].name + '</li>');
            if (a[i].group)
                get_list( a[i].group, newUl );
        }

    }
    $parent.append(newUl);
}

get_list( mods.group, $(".mod-list"));

函数获取列表（一个$parent）{
var newUl=$（“
”）；
对于（变量i=0；i'+a[i].name+''）；
if（a[i].组）
获取列表（a[i].group，newUl）；
}
}
$parent.append（newUl）；
}
获取列表（mods.group，$（“.mod list”）；

这是一把小提琴：

这个怎么样：

function get_list( a, $parent ) {
    var newUl = $("<ul></ul>");
    for (var i = 0; i < a.length; i++) {
        if (a[i]) {
            newUl.append('<li>' + a[i].name + '</li>');
            if (a[i].group)
                get_list( a[i].group, newUl );
        }

    }
    $parent.append(newUl);
}

get_list( mods.group, $(".mod-list"));

函数获取列表（一个$parent）{
var newUl=$（“
”）；
对于（变量i=0；i'+a[i].name+''）；
if（a[i].组）
获取列表（a[i].group，newUl）；
}
}
$parent.append（newUl）；
}
获取列表（mods.group，$（“.mod list”）；

---

这里有一个可行的解决方案：

另一个不会留下空的

解决方案 我还喜欢构建所有的html并一次性将其添加到DOM中，而不是添加许多小片段

function get_list( a, str ) {
    str += '<ul>';
    for (var i = 0; i < a.length; i++) {
        str += '<li>' + a[i].name;
        if (a[i].group && a[i].group.length) str += get_list( a[i].group, '' );
        str += '</li>';
    }
    str += '</ul>';
    return str;
}

$(".mod-list").append(get_list( mods.group, ''));

函数获取列表（a，str）{
str+='
'；
对于（变量i=0；i

---

另一种不会留下空的解决方案

我还喜欢构建所有的html并一次性将其添加到DOM中，而不是添加许多小片段

function get_list( a, str ) {
    str += '<ul>';
    for (var i = 0; i < a.length; i++) {
        str += '<li>' + a[i].name;
        if (a[i].group && a[i].group.length) str += get_list( a[i].group, '' );
        str += '</li>';
    }
    str += '</ul>';
    return str;
}

$(".mod-list").append(get_list( mods.group, ''));

函数获取列表（a，str）{
str+='
'；
对于（变量i=0；i

---

这里有一种方法，它还可以在字符串数组中构建所有html，并且在完成后只进行一次追加。准备插入时加入数组

$(function(){
    var $list=$(get_list(mods.group,[]).join('')).addClass('list')
     $('.mod-list').append($list) 
});

function get_list(data, strArray) {
    strArray.push('<ul>');
    $.each(data, function(i, val) {
        strArray.push('<li>' + val.name);
        if (val.group) {
            get_list(val.group,strArray);
        }
        strArray.push('</li>');
    });
    strArray.push('</ul>');
    return strArray;
}

$（函数（）{
var$list=$（get_list（mods.group，[]）.join（“”））.addClass（'list'））
$（'.mod list'）。追加（$list）
});
函数获取列表（数据、策略）{
strArray.push（“
”）；
$。每个（数据、函数（i、val）{
strArray.push（“
”+val.name）；
if（val.group）{
获取列表（val.group、strArray）；
}
strArray.push（“
”）；
});
strArray.push（“
”）；
回程线；
}

---

这里有一种方法，它还可以构建字符串数组中的所有html，并且在完成后只进行一次追加。准备插入时加入数组

$(function(){
    var $list=$(get_list(mods.group,[]).join('')).addClass('list')
     $('.mod-list').append($list) 
});

function get_list(data, strArray) {
    strArray.push('<ul>');
    $.each(data, function(i, val) {
        strArray.push('<li>' + val.name);
        if (val.group) {
            get_list(val.group,strArray);
        }
        strArray.push('</li>');
    });
    strArray.push('</ul>');
    return strArray;
}

$（函数（）{
var$list=$（get_list（mods.group，[]）.join（“”））.addClass（'list'））
$（'.mod list'）。追加（$list）
});
函数获取列表（数据、策略）{
strArray.push（“
”）；
$。每个（数据、函数（i、val）{
strArray.push（“
”+val.name）；
if（val.group）{
获取列表（val.group、strArray）；
}
strArray.push（“
”）；
});
strArray.push（“
”）；
回程线；
}

---

非常感谢您。我发现所有三个发布的解决方案都很有用，但这一个对于我的实际用例来说是最实用的。谢谢你的帮助，非常感谢。我发现所有三个发布的解决方案都很有用，但这一个对于我的实际用例来说是最实用的。我感谢你的帮助。