Question

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

我在这样的函数中收集项目名称：

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

我的示例html很简单

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

    <ul class="list">

    </ul>

</div>

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

请有人帮我解决这个问题。

谢谢！

Answer 1

这个怎么样：

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"));

这是一个工作小提琴：http://jsfiddle.net/aj9TC/7/

Answer 2

另一种不会留空<ul>的解决方案我还想构建我的所有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, ''));

http://jsfiddle.net/aj9TC/8/

Answer 3

这是一种方法，它也可以在字符串数组中构建所有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;
}

的 DEMO

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

3 个答案: