javascript - 如何从数组数据制作嵌套有序列表

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);