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を使用して新しい要素を作成しています。その後、対応するol/liにappendChildを挿入しています。

最も重要な部分は、if (i !== 0)です（これは、配列の先頭から末尾まで、どちらでもかまいません）。これは私が巣を作っている部分です。

新しいliを作成しています。これは、<p>と入れ子のold_olです。だから、この機能が果たしていることは、最奥のオールを作り、それを上に広げていることです。

これを行うには明確な方法があるかもしれませんが、これは私がvanilla JSで知っている限りです。私はすべてが十分明確であることを望む。