在 JavaScript 中按文档顺序对元素进行排序答案

【问题标题】：Sort elements by document order in JavaScript在 JavaScript 中按文档顺序对元素进行排序
【发布时间】：2015-11-06 14:21:46
【问题描述】：

我有一个Elements 数组，我希望它们按文档顺序排列。我知道这在 XPath 中实现起来很简单，但是我必须实现的逻辑对于单个表达式来说有点复杂。

我确实找到了Node.compareDocumentPosition()，但它会生成相当多组合的位掩码，因此不太适合比较器。

作为最后的手段，我可能会在数组中的所有元素上添加一个随机属性并使用 XPath 再次选择它们，但如果可能的话我宁愿不这样做。

【问题讨论】：

数组是如何构建的？是否可以先按文档顺序构建数组，而不是在事件之后对其进行排序？
@atmd 元素是一些现有函数调用的结果。理论上我可以按文档顺序选择它们，但代码看起来不会比我提到的 hack 更好，并且增加了不必要的维护负担。
只是大声思考，也许是从文档中重新选择元素的蛮力方法？根据您如何为每个（并且唯一的）元素确定准确的选择器，您可以遍历列表并构造一个选择器来获取所有元素。在 JQuery 中可能会导致如下结果： $('#id20, #id5, #id12, #id7')... JQuery 将按文档顺序返回集合，而不是按选择器中指定的顺序。

标签： javascript dom xpath

【解决方案1】：

我不一定同意document.compareDocumentPosition() 不足以作为比较器。为什么您认为这不理想？

var elementArray = [];

elementArray.push(document.getElementById('div3'));
elementArray.push(document.getElementById('div2'));
elementArray.push(document.getElementById('div4'));
elementArray.push(document.getElementById('div1'));

function documentPositionComparator (a, b) {
  if (a === b) {
    return 0;
  }

  var position = a.compareDocumentPosition(b);

  if (position & Node.DOCUMENT_POSITION_FOLLOWING || position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
    return -1;
  } else if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) {
    return 1;
  } else {
    return 0;
  }

}

console.log('unsorted::', elementArray);
console.log('sorted::', elementArray.sort(documentPositionComparator));

<div id="div1">Div 1
  <div id="div2">Div 2
    <div id="div3">Div 3</div>
    <div id="div4">Div 4</div>
  </div>
</div>

【讨论】：

好的。代码看起来并不像我想象的那么可怕。