[英]Sort list-items with subcategories
I have the following code to sort a List like this by the order attribute: 我有以下代码通过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>
Code: 码:
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]);
}
This works very finde. 这非常有效。 But now I have this: 但现在我有这个:
<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>
It's like subitems. 这就像子项目。 So every item having the "parOrder" attribute is a child. 所以具有“parOrder”属性的每个项目都是一个孩子。 And parOrder gives the order of the parent-item and order of itself. 并且parOrder给出父项的顺序和它自己的顺序。
How can I order it, so that the Childs are ordered itself under the parent item. 我如何订购它,以便Childs在父项下排序。 In this example it would be: 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>
You can sort by order
only those items which have no parOrder
(1-level nodes). 您可以按order
排序那些没有parOrder
(1级节点)的项目。 Then, while appending items without parOrder
, you can find items which are "child" items for the current, sort them by order
and append. 然后,在附加没有parOrder
项目时,您可以找到当前为“子”项的项目,按order
对它们进行order
并追加。 Just a simple nested loop. 只是一个简单的嵌套循环。
By the way, you don't need to removeChild
if you want to sort items. 顺便说一下,如果要对项目进行排序,则不需要removeChild
。 Executing appendChild
on existing DOM element will remove it from the original location before inserting in a new location. 在现有DOM元素上执行appendChild
会在插入新位置之前将其从原始位置删除。
Something like this: 像这样的东西:
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]);
}
}
In other words, it sorts 1-level nodes and gets 1, 2, 4. Then, it appends 1 - no child items; 换句话说,它对1级节点进行排序并获得1,2,4。然后,它附加1 - 没有子项; appends 2 - two child nodes are being sorted and inserted after the current one; 追加2 - 在当前节点之后对两个子节点进行排序和插入; appends 4. 附加4。
Of course, this code can be easily optimized by removing a duplicating code which sorts items. 当然,通过删除对项目进行排序的重复代码,可以轻松优化此代码。 It's up to your fantasy. 这取决于你的幻想。 Here is just a working JSFiddle Demo . 这是一个有效的JSFiddle演示 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.