Wie sortiere ich eine komplexe Liste in Javascript?

Question

Ich stecke diese Frage für eine Weile fest. Ich habe eine verschachtelte Liste, sieht die Struktur wie

Volume1 
    Chapter4 
    Chapter3 
     Section3-6 
     Section3-1 
Volume2... 
... 

Was ich will, ist eine Sortierfunktion zu schaffen Volumen, Kapitel zu sortieren, und Abschnitt.

So kann das Ergebnis wie

Volume1 
    Chapter1 
     Section1-1 
.... 

Also habe ich eine komplexe HTML, hier ist die whole html. Ich bin mir nicht sicher, wie man diesen Komplex austauschen div Ich habe versucht, Element zu bekommen und sie in ein Array zu setzen.

var toSort = document.getElementById('volume5015').children; 
toSort = Array.prototype.slice.call(toSort, 0); 

Answer 1

Ich habe eine Geige für dich gemacht.

In meinem Code trimme ich die Leerzeichen des Textes, damit die nicht verglichen werden, aber Sie müssen nicht wirklich, wenn Sie nicht wollen.

var $items = $("#to-sort").children(); 
var $resultList = $("#list2"); 

sortMarkup($items, $resultList); 

function sortMarkup($elements, $output) { 
    $elements.sort(function(a, b) { 
    var contentA = getPureText(a).trim(); 
    var contentB = getPureText(b).trim(); 
    var okay = contentA.toUpperCase().localeCompare(contentB.toUpperCase()); 

    if($(a).children().length > 0) 
     sortMarkup($(a).children(), $(a)); 

    if($(b).children().length > 0) 
     sortMarkup($(b).children(), $(b)); 

    console.log("sorting ["+contentA+"] and ["+contentB+"] returned "+okay); 
    return okay; 
    }); 

    $output.append($elements); 
} 

function getPureText(elem) { 
    return $(elem).contents().filter(function() { 
    return this.nodeType == 3; 
    })[0].nodeValue; 
} 

Auch ich verwende eine Ausgabeliste, eine andere Sache, die nicht erforderlich ist. Fühlen Sie sich frei, auf Ihre Bedürfnisse zu modifizieren!

Geige: https://jsfiddle.net/vincelord/sn42argq/