JavaScript: Wie verschachtelte geordnete Liste generiert wird

Question

Wie genestete geordnete Listen aus dem folgenden Inhalt generieren? Ich habe das Forum durchsucht und einige Stunden gearbeitet, um auf Basis der verschiedenen Klassen aus dem Quellinhalt geordnete Listen zu generieren. Der Inhalt kann bis zu 6 verschachtelte Ebene haben. Was ich brauche, ist geordnete Listen basierend auf den verschiedenen Klassen zu generieren. Wie im Beispielinhalt gezeigt, erhalten Sie etwas wie unten beschrieben Beispielinhalt.

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

Der Code:

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

Der obige Code erzeugt die folgende:

'<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>' 

Das gewünschte Ergebnis sein sollte:

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

Ihre Hilfe ist wirklich zu schätzen.

Answer 1

Folgendes habe ich bekommen.

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>

Dies ist nur ein Beispiel und nicht genau die Daten, die Sie haben (Sie können das herausfinden).

Was passiert ist, dass ich neue Elemente mit document.createElement erstellen, nach denen ich sie in ihre entsprechenden ol/li unter Verwendung appendChild einfügen.

Der wichtigste Teil ist der if (i !== 0) (Ändern Sie dies, ob Sie am Anfang oder am Ende Ihres Arrays beginnen möchten). Dies ist der Teil, wo ich die Nester erstelle.

Ich erstelle eine neue li, die die <p> und die old_ol hat, die die Verschachtelung li ist. Also, was diese Funktion macht, ist das innerste ol zu schaffen und es nach oben zu erweitern.

Es könnte einen klaren/besseren Weg, dies zu tun, aber das ist soweit ich weiß in Vanille JS. Ich hoffe alles ist klar genug.