Сортировать элементы списка с подкатегориями

Question

У меня есть следующий код для сортировки списка, как это с помощью атрибута заказа:

<div id="a-categories"> 
    <a href="blabla" order="2" class="leftCats">Cat 2</a> 
    <a href="blabla" order="1" class="leftCats">Cat 1</a> 
    <a href="blabla" order="4" class="leftCats">Cat 4</a> 
</div> 

Код:

var list = document.id('a-categories'); 
var listGroupObjects = document.getElementsByClassName('leftCats'); 

var listGroupArray = []; 
for (var i = 0; i < listGroupObjects.length; ++i) { 
    listGroupArray.push(listGroupObjects[i]); 
} 

listGroupArray.sort(function (a, b) { 
    return (a.getAttribute('order') - b.getAttribute('order')); 
}); 

for (var i = 0; i < listGroupArray.length; i++) { 
    list.removeChild(listGroupArray[i]); 
} 

for (var i = 0; i < listGroupArray.length; i++) { 
    list.appendChild(listGroupArray[i]); 
} 

Это работает очень Finde. Но теперь у меня есть это:

<div id="a-categories"> 
    <a href="blabla" order="2" class="leftCats">Cat 2</a> 
    <a href="blabla" order="1" class="leftCats">Cat 1</a> 
    <a href="blabla" order="1" parOrder="2" class="leftCats">Cat 2.1</a> 
    <a href="blabla" order="2" parOrder="2" class="leftCats">Cat 2.2</a> 
    <a href="blabla" order="4" class="leftCats">Cat 4</a> 
</div> 

Это как подразделов. Поэтому каждый элемент, имеющий атрибут parOrder, является дочерним. И parOrder дает порядок родительского элемента и его порядок.

Как я могу заказать его, чтобы Childs упорядочивались под родительским элементом. В данном примере это будет: Edit:

<div id="a-categories"> 
    <a href="blabla" order="1" class="leftCats">Cat 1</a> 
    <a href="blabla" order="2" class="leftCats">Cat 2</a> 
    <a href="blabla" order="1" parOrder="2" class="leftCats">Cat 2.1</a> 
    <a href="blabla" order="2" parOrder="2" class="leftCats">Cat 2.2</a> 
    <a href="blabla" order="4" class="leftCats">Cat 4</a> 
</div> 

Answer 1

Вы можете сортировать order только те пункты, которые не имеют parOrder (узлы 1 уровня). Затем, добавляя предметы без parOrder, вы можете найти элементы, которые являются «дочерними» элементами для текущего, сортировать их по order и добавлять. Просто простой вложенный цикл.

Кстати, вам не нужно removeChild, если вы хотите отсортировать товары. Выполнение appendChild на существующем элементе DOM удалит его из исходного местоположения перед вставкой в ​​новое место.

Что-то вроде этого:

var list = document.getElementById('a-categories'); 
var listGroupObjects = [].slice.call(document.querySelectorAll('.leftCats:not([parOrder])')); 

listGroupObjects.sort(function (a, b) { 
    return (a.getAttribute('order') - b.getAttribute('order')); 
}); 

for (var i = 0; i < listGroupObjects.length; i++) 
{ 
    list.appendChild(listGroupObjects[i]); 

    var sublistGroupObjects = [].slice.call(list.querySelectorAll(".leftCats[parOrder='" + listGroupObjects[i].getAttribute('order') + "']")); 

    sublistGroupObjects.sort(function (a, b) { 
     return (a.getAttribute('order') - b.getAttribute('order')); 
    }); 

    for (var j = 0; j < sublistGroupObjects.length; j++) 
    { 
     list.appendChild(sublistGroupObjects[j]);  
    } 
} 

Другими словами, он сортирует узлы 1 уровня и получает 1, 2, 4. Затем она добавляет 1 - нет дочерних элементов; добавляет 2 - два дочерних узла сортируются и вставляются после текущего; добавляет 4.

Конечно, этот код можно легко оптимизировать, удалив дублирующий код, сортирующий элементы. Это зависит от вашей фантазии. Вот только рабочий JSFiddle Demo.