上下文
我已经构建了一个 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。)
最佳答案
有一个非常有用的函数叫做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;
});
关于javascript - 根据 DOM 中的位置对包含 DOM 元素的数组进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22612795/