循环显示分层数据答案

【问题标题】：Loop to display hierarchical data循环显示分层数据
【发布时间】：2014-09-08 16:53:03
【问题描述】：

我正在从本质上是分层数据创建一个数组，例如如下：

[
    {id: 1, title: 'hello', parent: 0, children: [
        {id: 3, title: 'hello', parent: 1, children: [
            {id: 4, title: 'hello', parent: 3, children: [
                {id: 5, title: 'hello', parent: 4},
                {id: 6, title: 'hello', parent: 4}
            ]},
            {id: 7, title: 'hello', parent: 3}
        ]}
    ]},
    {id: 2, title: 'hello', parent: 0, children: [
        {id: 8, title: 'hello', parent: 2}
    ]}
]

我正在寻找遍历数组，但无法理解如何递归循环以创建每个子级别缩进的无序列表。尝试在 JavaScript 中执行此操作，但需要朝着正确的方向推动循环的构造以向下钻取直到没有更多子元素，然后返回到顶部数组。

任何帮助将不胜感激。

【问题讨论】：

您的问题不清楚。您是在尝试将层次结构扁平化为包含每个节点的数组，还是尝试将层次结构写入具有正确缩进的字符串？（示例 JSON 是您开始使用的还是您想要结束的？）

标签： javascript arrays for-loop multidimensional-array

【解决方案1】：

我之前回答过一个关于这个的问题

这是它的演示：http://jsfiddle.net/zn2C7/7/

var list = $("<ul>");
function populatedata() {
     $.each(data.FolderList, function (i, folder) {                
         if (folder.ParentFolderID == -1) {
            var item = $("<li>").html(folder.FolderName);

            list.append(item);
            var children = $('<ul>');
            item.append(children);
            checkChild(folder.FolderID, children);                    
        }

    });
    $('body').append(list);
}

function checkChild(parentid, parent) {
    $.each(data.FolderList, function (i, folder) {
        if (folder.ParentFolderID == parentid) {
            var item = $("<li>").html(folder.FolderName);                    
            var children = $('<ul>');
            parent.append(item);
            item.append(children);
            checkChild(folder.FolderID, children);                    
        }
        else {
            return ;
        }
    });
}

可以使用 html 变量构建它，就像您尝试那样，但使用 jQuery ($('<ul>') and $('<li>') - create new element, .append() - append element to some other element) 的 DOM 操作函数要简单得多

  function checkChild(parentid) {
        $.each(data.FolderList, function (i, folder) {

            if (folder.ParentFolderID == parentid) {
                html += '<li><ul>' + folder.FolderName;
                checkChild(folder.FolderID);
                html+=</ul></li>
                return html;
            }
            else {
                return ;
            }
        });
    }

另外，请注意，在上面的代码中，您正在执行 return html；从每个函数回调。不确定你想得到什么，但在 .each 中它可能像常规循环中的中断一样工作（如果你将返回 false）：

我们可以通过返回 false 从回调函数中停止循环。

来自 jquery api 页面。

此外，对于此类任务，我更喜欢使用调试器。目前有很多强大的工具可以在浏览器中进行 HTML/CSS/JS 调试。只需在 Chrome、IE 或 FF 中按 F12（最后一个可能需要安装 Firebug 扩展），您将获得许多有用的功能以及简单的 JS 调试。

【讨论】：