Javascript 使用子类别对列表项进行排序

我使用以下代码按顺序属性对这样的列表进行排序：

<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=[]；
对于（变量i=0；i

这很有效。 但现在我有了这个：

<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给出父项的顺序和自身的顺序

如何对其进行排序，以便在父项下对子项进行排序。 在本例中，它将是：编辑：

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

---

您可以按

顺序排序

仅对那些没有

parOrder

（1级节点）的项目进行排序。然后，在追加不带

parOrder

的项目时，您可以找到当前项目的“子”项目，按

order

对其排序并追加。只是一个简单的嵌套循环

顺便说一下，如果要对项目进行排序，则不需要

removeChild

。在现有DOM元素上执行

appendChild

，将在插入新位置之前将其从原始位置移除

大概是这样的：

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

var list=document.getElementById（'a-categories'）；
var listGroupObjects=[].slice.call（document.queryselectoral（'.leftCats:not（[parOrder]））；
排序（函数（a，b）{
返回（a.getAttribute（'order'）-b.getAttribute（'order'）；
});
对于（var i=0；i

换句话说，它对一级节点进行排序，得到1、2、4。然后，它附加1-无子项；附录2-在当前子节点之后排序并插入两个子节点；附录4

---

当然，通过删除对项目进行排序的重复代码，可以轻松优化此代码。这取决于你的幻想。这里只是一个例子。

我不明白你是如何得出最后结果的逻辑。为什么

order=4

位于具有子类别的项目之后？我认为子项是最后一个，因为您根据它们的

顺序

属性将它们按顺序排列。我期待的是订单1、2、4，然后是带有子类别的2，或者订单1、订单1带有子类别、订单2、订单2带有子类别、订单4。包含“parOrder”的不是带有子类别的。这些是子类别。e、 g.order=“1”parOrder=“4”表示它是order=“4”（没有parOrder）项目的子类别，order=“1”表示它是第一个子类别。看看我的编辑。我现在明白了，这更有意义。非常好的编辑。您应该将比较函数中的

order

属性的值转换为实数，否则

order=1x

的项目将在

order=2/3/4/5的项目前面结束。

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