JavaScript：如何生成嵌套的有序列表

Question

如何从以下内容生成嵌套的有序列表？我已经搜索了论坛并且现在工作了几个小时，以便根据源内容中的不同类生成有序列表。该内容最多可以有6层嵌套 级别。 我需要的是根据不同的类生成有序列表。如示例内容所示，以获得类似于下面概述的示例内容的内容。

.firstclass => 1. 
    .secondclass => 1. 
     .thirdclass => 1. 
      .fourthclass => 1. 

代码：

var cheerio = require('cheerio'); 
var $ = cheerio.load('<h1 class="header">First Header</h1><p class="firstclass">First Lorem ipsum dolor sit.</p><p class="firstclass">First Qui consequatur labore at.</p><p class="secondclass">Second Lorem ipsum dolor sit amet.</p> <p class="thirdclass">Third Lorem ipsum dolor sit amet.</p><p class="thirdclass">Third Molestias optio quasi ipsam unde!</p><p class="secondclass">Second Lorem ipsum dolor sit amet, consectetur.</p><p class="fourthclass">Fourth Lorem ipsum dolor sit.</p><p class="firstclass">First Lorem ipsum dolor sit amet.</p>', { 
    normalizeWhitespace: true, 
    xmlMode: true, 
    decodeEntities: false, 
}); 

var myContent = $('p').each(function() { 
    var para = $(this).text(); 
    return para; 
}); 

var olClass = ['.firstclass', '.secondclass', '.thirdclass', '.fourthclass']; 

function arrToOl(arr) { 
    var ol = $('<ol />'), 
     li = $('<li />'); 
    for (var i = 0; i < arr.length; i++) { 
     if (Array.isArray(arr[i])) { 
      li.append(arrToOl(arr[i])); 
     } else { 
      li = $('<li />'); 
      li.append($(arr[i])); 
      ol.append(li); 
     } 
    } 
    return $.html(ol); 
} 
console.dir(arrToOl(olClass)); 

上面的代码产生以下：

'<ol><li><p class="firstclass">First Lorem ipsum dolor sit.</p><p class="firstclass">First Qui consequatur labore at.</p><p class="firstclass">First Lorem ipsum dolor sit amet.</p></li><li><p class="secondclass">Second Lorem ipsum dolor sit amet.</p><p class="secondclass">Second Lorem ipsum dolor sit amet, consectetur.</p></li><li><p class="thirdclass">Third Lorem ipsum dolor sit amet.</p><p class="thirdclass">Third Molestias optio quasi ipsam unde!</p></li><li><p class="fourthclass">Fourth Lorem ipsum dolor sit.</p></li></ol>' 

期望的结果应该是：

<ol> 
    <li> 
     <p class="firstclass">First Lorem ipsum dolor sit.</p> 
    </li> 
    <li> 
     <p class="firstclass">First Qui consequatur labore at.</p> 
    </li> 
    <li> 
     <p class="firstclass">First Lorem ipsum dolor sit amet.</p> 
     <ol> 
      <li> 
       <p class="secondclass">Second Lorem ipsum dolor sit amet.</p> 
      </li> 
      <li> 
       <p class="secondclass">Second Lorem ipsum dolor sit amet, consectetur.</p> 
       <ol> 
        <li> 
         <p class="thirdclass">Third Lorem ipsum dolor sit amet.</p> 
        </li> 
        <li> 
         <p class="thirdclass">Third Molestias optio quasi ipsam unde!</p> 
         <ol> 
          <li> 
           <p class="fourthclass">Fourth Lorem ipsum dolor sit.</p> 
          </li> 
         </ol> 
        </li> 
       </ol> 
      </li> 
     </ol> 
    </li> 
</ol> 

你的帮助是非常赞赏。

Answer 1

这就是我得到的。

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

 
function create_nested() 
 
{ 
 
    var old_ol; 
 
    for (let i = 0; i < array.length; i++) 
 
    { 
 
    \t let new_ol = document.createElement("ol"); 
 
    \t let new_li = document.createElement("li"); 
 
    new_li.innerHTML = array[i]; 
 
\t new_ol.appendChild(new_li); 
 
    
 
    if (i !== 0) 
 
    { 
 
     let nest_li = document.createElement("li"); 
 
     let new_p = document.createElement("p"); 
 
     new_p.innerHTML = "new stuff"; 
 
     nest_li.appendChild(new_p); 
 
     nest_li.appendChild(old_ol); 
 
     new_ol.appendChild(nest_li); 
 
    } 
 
    
 
    old_ol = new_ol; 
 
    nested = new_ol; 
 
    } 
 
} 
 

 
create_nested(); 
 

 
document.getElementById('main').appendChild(nested);

<div id='main'> 
 

 
</div>

这只是一个例子，不完全的数据，你有（你可以明白这一点）。

发生了什么是我正在使用document.createElement创建新元素，之后我使用appendChild将它们插入相应的ol/li中。

最重要的部分是if (i !== 0)（更改此设置以适合您是否要从阵列的开头或结尾开始）。这是我创造巢穴的部分。

我正在创建一个新的li，其中有<p>和old_ol这是嵌套li。所以这个功能在做什么，是创建最内层的，并向上扩展。

可能有一个清晰/更好的方式来做到这一点，但就我所知的香草JS而言。我希望一切都足够清晰。