如何从数组数据中创建嵌套的有序列表

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;

它会在控制台中显示结果。