从顶层到底层对 DOM 节点数组进行排序

Question

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

我尝试了这样的方法：

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

但它似乎并没有完美地排序。有时我仍然会在父母之前拥有子元素。为什么这不起作用？有没有办法用 javascript 的原生排序来做到这一点？

更新：在调查了答案中的方法后，我想知道它们的表现如何。 这里是结果。请随意调整，看看性能如何适合您。

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 稍后放入数组比b。

所以我在想：

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

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

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

function isParentOf(parent, elm) {
    while (elm) {
        elm = elm.parentNode;
        if (elm === parent) {
            return true;
        }
    }
    return false;
}

工作示例 但请注意timmywil 的答案 ——尽管它做了一些不必要的工作（将兄弟姐妹排序，当你只关心父母时） /child)，有一个预制的 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);
    });
}