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

Question

上下文

我已经构建了一个我目前正在使用的 jQuery 插件，它让我将 DOM 元素存储在一个数组中，主要是为了能够在这些元素旁边存储更多信息，而无需使用不那么-快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() 和一种与每个 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;
});

Answer 2

虽然我不建议您采用这种方法，但使用 jquery 可以获得“全局 DOM 索引”：

var $all = $("*");

// use index to get your element's index within the entire DOM
$all.index($YOUR_EL);

Answer 3

您无需进行大量重构即可利用 jQuery 的排序功能。您可以将其用作临时排序机制。这是一个现成的：

function putInDocumentOrder(a) {
      var elements;

    // Get elements in order and remember the index of
    // the entry in `a`
    elements = $().add(a.map(function(entry, index){
        entry.element.__index = index;
        return entry.element;
    }));

    // Build array of entries in element order
    a = elements.map(function(){
        return a[this.__index];
    }).get();

    return a;
}

它需要一个expando，但它可以完成这项工作。 Live Example

这样做的好处是它可以在 jQuery 支持的所有浏览器上运行，而无需您自己处理边缘情况（例如，IE8 不支持compareDocumentPosition）。

Answer 4

如果您可以假设页面上的可见位置相同，那可能是一个相对快速的解决方案：

function compareByVisibleLocation(a, b) {
  if (a.offsetTop > b.offsetTop) {
    return 1;
  } else if (a.offsetTop < b.offsetTop) {
    return -1;
  }

  if (a.offsetLeft > b.offsetLeft) {
    return 1;
  } else if (a.offsetLeft < b.offsetLeft) {
    return -1;
  } else {
    return 0;
  }
}

nodes.sort(compareByVisibleLocation);

否则，您可以使用querySelectorAll() 快速构建索引（这是深度优先的前序遍历），方法是使用indexed-node 类名显式标记要索引的节点。

var nodes = document.querySelectorAll('.indexed-node');

或者通过抓取所有单个节点类型，如果可行的话：

var nodes = document.querySelectorAll('div');

或者只是抓取所有节点：

var nodes = document.querySelectorAll('*');

然后给每个节点添加一个索引属性：

for (var i = 0; i < nodes.length; i++) { nodes[i].__DomIndex = i; }

你可以这样排序：

var nodes = yourGetMethod().sort(function(a,b) {
  if (a === b) {
    return 0;
  } else if (a.__DomIndex > b.__DomIndex) {
    return 1;
  } else {
    return -1;
  }
});

应该工作到 IE8。