Question

我有以下代码通过order属性对这样的List进行排序：

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

这非常有效。但现在我有了这个：

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

它就像子项目。所以每个项目都有＆＃34; parOrder＆＃34;属性是一个孩子。并且parOrder给出父项的顺序和它自己的顺序。

如何订购，以便Childs在父项目下自行订购。在此示例中，它将是：编辑：

<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。在现有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]);    
    }
}

换句话说，它对1级节点进行排序并获得1,2,4。然后，它附加1 - 没有子项;追加2 - 在当前节点之后对两个子节点进行排序和插入;附加4。

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

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

1 个答案: