Javascript 在for循环中添加换行符或类似内容，并且值发生更改-jQuery

我有一个包含用户的db表，我正在创建一个层次结构系统

当前显示的是顶级用户（具有1层次结构），单击后，我通过ajax收集所有相关用户，并显示在下面

这些用户的层次结构有4层或5层。1是最高级别

我希望能够在层次结构每次更改时创建一个新的用户行

我查询数据库，并按照层次结构编号的顺序获取所有用户，然后将它们放入一个数组中，返回JSON并在jQuery中循环：

for(var i=0; i<data.userArray.length; i++){
  var user = data.userArray[i];
  $appendedItems.append(SHOW ALL USERS HERE);
}

每次层次结构发生变化时，我都会显示一个换行符，或者只是为了让用户在新行上表示一个较低的级别

---

谢谢。

我会怎么做，显然你的情况会有所不同，但你可以得到这个想法：

标记：

<ul id="#users">
    <li data-user-id="3">david</li>
    <li data-user-id="4">frank</li>
</ul>

david
弗兰克

jQuery：

$('#users').on('click', 'li:not(.exploded)', function() {
    var $user = $(this).addClass('exploded'),
        userId = $user.data('userId'),
        url = '/getUsersChildres?user=' + userId;

    $.getJSON(url).then(function(data) {
        $('<ul>', {
            html: $.map(data.userArray, function(i, user) {
                return $('<li>', {
                    text: user.name,
                    data: {
                        'userId': user.id
                    }
                });
            })
        }).appendTo($user);
    }, function() {
        $user.removeClass('exploded');
    });

    return false;
});

$（'#users'）。在（'click'，'li:not（.exploded'）上，函数（）{
var$user=$（this.addClass（'exploded'），
userId=$user.data（'userId'），
url='/getUsersChildres？user='+userId；
$.getJSON（url）.then（函数（数据）{
$（“
”{
html:$.map（data.userArray，函数（i，用户）{
返回$（“
”{
text:user.name，
数据：{
“userId”：user.id
}
});
})
}).appendTo（$用户）；
}，函数（）{
$user.removeClass（'exploded'）；
});
返回false；
});

最终应该是：

<ul id="#users">
    <li data-user-id="3" class="exploded">david
        <ul>
            <li data-user-id="13">jack</li>
            <li data-user-id="14">paul</li>
        </ul>
    </li>
    <li data-user-id="4">frank</li>
</ul>

david

插孔
paul


弗兰克

人们通常会在

ul

s中嵌套

li

s，列表将自动填充层次结构。您是否尝试添加检查以增加层次结构级别？在循环之前添加一个变量以存储当前层次结构，如果循环的当前迭代不匹配（或大于）存储的层次结构，则缩进（使用换行符或

ul>li>ul

等）。

<ul id="#users">
    <li data-user-id="3" class="exploded">david
        <ul>
            <li data-user-id="13">jack</li>
            <li data-user-id="14">paul</li>
        </ul>
    </li>
    <li data-user-id="4">frank</li>
</ul>