javascript - 根据 DOM 中的位置对包含 DOM 元素的数组进行排序

Question

上下文

我已经构建了一个 jQuery 插件，我目前正在以一种将 DOM 元素存储在数组中的方式工作，主要是为了能够在这些元素旁边存储更多信息，而不必使用 not-so-快速 data()。

那个数组看起来像:

[
    { element: DOMElement3, additionalData1: …, additionalData2: … },
    { element: DOMElement1, additionalData1: …, additionalData2: … },
    { element: DOMElement2, additionalData1: …, additionalData2: … },
]

此插件的工作方式阻止我以可预测的顺序将这些元素推送到数组，这意味着 DOMElement3 实际上可以在低于 DOMElement2 的索引处找到自己的。

但是，我需要按照它们包含的 DOM 元素在 DOM 中出现的相同顺序对这些数组元素进行排序。前面的示例数组一旦排序，将如下所示:

[
    { element: DOMElement1, additionalData1: …, additionalData2: … },
    { element: DOMElement2, additionalData1: …, additionalData2: … },
    { element: DOMElement3, additionalData1: …, additionalData2: … },
]

当然，如果 DOMElement1 在 DOM 中出现在 DOMElement2 之前，并且 DOMElement2 在 DOMElement3 之前.

废弃的解决方案

jQuery add()方法返回一组 DOM 元素，顺序与它们在 DOM 中出现的顺序相同。我可以使用它，但要求是我使用 jQuery 集合——这意味着我必须重构上述插件的一大块才能使用不同的存储格式。这就是为什么我认为这是最后的解决方案。

另一个解决方案？

我本以为map()和一种绑定(bind)到每个 DOM 元素的全局 DOM 索引就可以解决问题，但似乎没有这样的“全局 DOM 索引”。

你能想到什么方法？ (如果编写代码，欢迎使用 vanilla JS 和 jQuery。)

Answer 1

有一个非常有用的函数叫做compareDocumentPosition ，它根据两个元素的相对位置返回一个数字。您可以在 .sort 回调中使用它:

yourArray.sort(function(a,b) {
    if( a === b) return 0;
    if( !a.compareDocumentPosition) {
        // support for IE8 and below
        return a.sourceIndex - b.sourceIndex;
    }
    if( a.compareDocumentPosition(b) & 2) {
        // b comes before a
        return 1;
    }
    return -1;
});