Javascript로 복잡한 목록을 정렬하는 방법은 무엇입니까?

Question

나는이 질문에 잠시 머물러 있습니다. 중첩 목록이 있습니다. 구조는 다음과 같습니다.

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

볼륨, 챕터 및 섹션을 정렬하는 정렬 기능을 만드는 것이 좋습니다.

Volume1 
    Chapter1 
     Section1-1 
.... 

그래서 내가 여기에, 복잡한 HTML을받은 whole html처럼

그래서, 결과는있을 수 있습니다. 이 복잡한 코드를 교환하는 방법을 모르겠습니다. div 요소를 가져 와서 배열에 넣으려고했습니다.

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

Answer 1

나는 당신을 위해 바이올린을 만들었습니다.

내 코드에서 필자는 텍스트의 공백을 다듬어서 비교하지는 않지만 실제로 원하지 않는 경우에는 가질 필요가 없습니다.

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

또한 출력 목록도 필요하지 않습니다. 필요에 따라 자유롭게 수정하십시오!

바이올린 : https://jsfiddle.net/vincelord/sn42argq/가