循環顯示分層數據

Question

我從本質上是層級數據創建數組，例如，如下所示：

[
    {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進行此操作，但需要按正確的方向推動循環的構造，以向下鑽取直到不再有子級為止，然后返回到頂部數組。

任何幫助，將不勝感激。

Answer 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的DOM操作函數($('<ul>') and $('<li>') - create new element, .append() - append element to some other element)要簡單得多($('<ul>') and $('<li>') - create new element, .append() - append element to some other element)

  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調試。