如何在HTML中創建嵌套的有序列表

Question

從嵌套的JSON對象創建這樣的嵌套列表的最佳方法是什么（按列表，我的意思是<ol>標記或具有類似行為的自定義內容）：

1. 父母1
   一種。 子1
   b。 子2
   i.Sub Sub 1
   ii.Sub Sub 2
   C。 子3
   
2. 父母2

作為示例，讓我們使用最多3個“嵌套級別”的限制。

將生成此列表的JSON對象如下所示：

[
     {
         "content": "Parent 1",
         "children": [
             {
                 "content": "Sub 1",
                 "children": [...]
             },
             {
                 "content": "Sub 2",
                 "children": [...]
             }
         ]

     },
     {
         "content": "Parent 2"
     }
]

Answer 1

嘗試這種最簡單的方法

 var obj = [{ "content": "Parent 1", "children": [{ "content": "Sub 1", "children": [{ "content": "sub sub 12" }] }, { "content": "Sub 2", "children": [{ "content": "sub sub 12" }] }] }, { "content": "Parent 2" }]; var html = getListHTML(obj); console.log( html ); $( "body" ).append( html ); function getListHTML(obj) { if ( !obj ) { return ""; } var html = "<ol>"; html += obj.map(function(innerObj) { return "<li>" + innerObj.content + "</li>" + getListHTML(innerObj.children) }).join(""); html += "</ol>"; return html; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

然后，您可以根據li的層次結構級別給出不同的起始值（ 1或a或i ）

Answer 2

這是一個建議，它具有針對Array#forEach的迭代和遞歸回調，並具有動態生成的適當元素。

 function getValues(el) { var li = document.createElement('li'), ol; li.appendChild(document.createTextNode(el.content)); if (Array.isArray(el.children)) { ol = document.createElement('ol'); el.children.forEach(getValues, ol); li.appendChild(ol); } this.appendChild(li); } var data = [{ content: 'Parent 1', children: [{ content: 'Sub 1', children: [] }, { content: 'Sub 2', children: [{ content: 'Sub Sub 1' }, { content: 'Sub Sub 2' }, ] }, { content: 'Sub 3' }] }, { content: 'Parent 2' }], ol = document.createElement('ol'); data.forEach(getValues, ol); document.body.appendChild(ol);