Question

我有一个DOM节点的数组（javascript数组，而不是jQuery对象），它充当我处理它们的函数的队列。此数组可能包含具有父/子，祖父/子等关系的元素。我总是希望首先处理更高级别的元素。我的第一个倾向是在javascript中创建一个quicksort函数，但我知道如果我可以使用javascript的本地Array.prototype.sort方法会更快。

我试过这种方式：

domElements.sort(function (a, b) {
  return $(a).find(b).length ? 1 :
         $(b).find(a).length ? -1 :
         0;
});

但它似乎并没有完美地排序。我有时候还会在父母面前有孩子的元素。为什么这不起作用？有没有办法用javascript的原生排序呢？

更新：在调查答案中的方法后，我想知道他们是如何表现的。 Here是结果。随意调整，看看性能如何。

Answer 1

您可以使用jQuery的unique方法节省一些时间：http://api.jquery.com/jQuery.unique/

jQuery.unique(domElements);

Answer 2

（因为你要我发帖。:-)）

您已经说过要在数组中的子项之前使用父元素，但是您的代码

domElements.sort(function (a, b) { return $(a).find(b).length ? 1 : $(b).find(a).length ? -1 : 0; });

...如果1是a的父级，则会返回b，这会将a 以后的放在数组中而不是{{} 1}}。

所以我在想：

b

但是检查一个元素是否是另一个元素的后代是如此简单，我想知道你是否真的需要allocate-a-jQuery-object-and-then-call-find：

domElements.sort(function (a, b) { return $(a).find(b).length ? -1 : $(b).find(a).length ? 1 : 0; });

Working example但请注意timmywil's answer - 即使它做了一些不必要的工作（将兄弟姐妹整理好，当你关心的只是父/子）时，还有一个预先出炉的jQuery函数为此！

Answer 3

看起来我混淆了那个上面的负号：

domElements.sort(function (a, b) {
  return $(a).find(b).length ? -1 :
         $(b).find(a).length ? 1 :
         0;
});

似乎工作。

Answer 4

根据源代码顺序对文档中的随机元素进行排序让儿童节点和兄弟姐妹处于适当的位置。

if(!Array.prototype.indexOf){
    Array.prototype.indexOf= function(what, i){
        if(typeof i!= 'number') i= 0;
        var L= this.length;
        while(i< L){
            if(this[i]=== what) return i;
            ++i;
        }
        return -1;
    }
}
function nodeSort(nodesArray, pa){
    pa= pa || document;
    var original= [], src= pa.getElementsByTagName('*'), L= src.length;
    for(var i= 0; i<L; i++){
        if(nodesArray.indexOf(src[i])!=-1) original.push(src[i]);
    }
    return nodesArray.sort(function(a, b){
        return original.indexOf(a)- original.indexOf(b);
    });
}

从顶层到底层对DOM节点阵列进行排序

4 个答案: