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

您可以使用以下内容：

逻辑

以相反的顺序循环遍历数组。
对于每个项目，创建一个有序列表。
将此列表附加到下一个列表。

＆＃13;

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

＆＃13;

<div class='content'/>

＆＃13;

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;

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

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

4 个答案:

逻辑