如何從數組數據中創建嵌套的有序列表

Question

我有這樣的數據：

var array = ["a", "b", "c", "d", "e"];

我希望這樣的數據轉換如下：

<ol>
 <li>a</li>
   <ol>
    <li>b</li>
     <ol>
      <li>c</li>
       <ol>
        <li>d</li>
       </ol>
     </ol>
  </ol>

我會試試這個：

var makeNestedList = () => {
  $.each(array, function(i, el) {
    nested += '<ol>';
    nested += '<li>' + el + '</li>';
    makeNestedList();
    nested += '</ol>';
  });
};

但為什么結果是空的？

Answer 1

您可以使用Array#reduceRight並首先創建最嵌套的節點，然后創建外部節點。

 var array = ["a", "b", "c", "d", "e"], result = array.reduceRight(function (r, a) { return '<ol><li>' + a + r + '</li></ol>'; }, ''); document.body.innerHTML += result; console.log(result); 

從外到內有節點。

 var array = ["a", "b", "c", "d", "e"]; array.reduce(function (node, item) { var ol = document.createElement('ol'), li = document.createElement('li'); li.appendChild(document.createTextNode(item)); ol.appendChild(li); node.appendChild(ol); return li; }, document.body); 

Answer 2

您的代碼中存在許多問題。 您需要將輸入數組傳遞給函數並從中返回一些內容。 然后你不需要在里面循環，因為你無論如何都在使用遞歸。

我想這樣的東西會修復它：

 var array = ["a", "b", "c", "d", "e"]; var makeNestedList = (arr) => { let nested = '<ol>' nested += '<li>' + arr[0]; if (arr.length > 1) { nested += makeNestedList(arr.slice(1)); } nested += '</li></ol>'; return nested }; document.body.innerHTML = makeNestedList(array) 

Answer 3

你可以使用這樣的東西：

邏輯

• 以相反的順序循環遍歷數組。
• 對於每個項目，創建一個有序列表。
• 將此列表附加到下一個列表。

 function createOrderedList(items) { var ol = document.createElement('ol'); items.forEach(function(item){ ol.appendChild(createListItem(item)) }) return ol; } function createListItem(item) { var li = document.createElement('li'); li.textContent = item; return li; } var array = ["a", "b", "c", "d", "e"]; var list = array.reduceRight(function(p, c){ var el = createOrderedList([c]); if(p === null) { p = el; } else { el.appendChild(p); } return el; }, null); document.querySelector('.content').appendChild(list); 

 <div class='content'/> 

Answer 4

您可以嘗試以下，您的遞歸不正確。

var arr=[1,2,3];
var nested='';

 var nestIt=function(i){
    if(i==arr.length){
        return "";
    }
    nested += '<ol>';
    nested += '<li>' + arr[i]+ '</li>';
    nestIt(i+1)
    nested += '</ol>';

    return nested
}

nestIt(0);
nested;

它會在控制台中顯示結果。