如何通过订单号定位弹性项目

Question

我需要以编程方式重新排列其容器中的弹性项目，但我似乎找不到如何通过它们的order号选择它们。问题是它们没有按 DOM 顺序显示，而是使用 order css 属性。

如何重新排列它们？

我的网页：

<div id="container">
    <div style="order: 17"></div>
    <div style="order: 25"></div>
    <div style="order: 2"></div>
    <div style="order: 3"></div>
    // ...
</div>

基本上我需要这样做：

| A | B | C | D | E |
       +----------->
     <---+---+---+
result:
| A | C | D | E | B |

Answer 1

所以，我有一个滥用 CSS3 选择器的想法，它似乎正在工作，尽管我想知道这有多合法。

document.querySelector('div[style*="order: 25;"]')

然后要交换两个项目，我需要这样做：

var t = document.querySelector('div[style*="order: 25;"]');
document.querySelector('div[style*="order: 26;"]').style.order = 25;
t.style.order = 26;

Answer 2

您可以根据弹性项目的计算order对它们进行排序。

请注意，如果两个弹性项目具有相同的order，则应根据它们的 DOM 位置对它们进行排序。也就是说，排序必须是稳定的。由于[].sort不一定稳定，我将使用合并排序的自定义实现。

var orderedChildren = mergeSort([].map.call(
  document.getElementById('container').children,
  function(child) {
    return [child, +getComputedStyle(child).order];
  }
)).map(function(pair) {
  return pair[0];
});
function mergeSort(arr) {
  var m = Math.floor(arr.length / 2);
  if(!m) return arr;
  var arr2 = mergeSort(arr.splice(m)),
      arr1 = mergeSort(arr.splice(0));
  while(arr1.length && arr2.length)
    arr.push((arr1[0][1] > arr2[0][1] ? arr2 : arr1).shift());
  return arr.concat(arr1, arr2);
}

var orderedChildren = mergeSort([].map.call(
  document.getElementById('container').children,
  function(child) {
    return [child, +getComputedStyle(child).order];
  }
)).map(function(pair) {
  return pair[0];
});
function mergeSort(arr) {
  var m = Math.floor(arr.length / 2);
  if(!m) return arr;
  var arr2 = mergeSort(arr.splice(m)),
      arr1 = mergeSort(arr.splice(0));
  while(arr1.length && arr2.length)
    arr.push((arr1[0][1] > arr2[0][1] ? arr2 : arr1).shift());
  return arr.concat(arr1, arr2);
}
for(var i=0; i<orderedChildren.length; ++i) {
  orderedChildren[i].textContent = i;
}

#container {
  display: flex;
  flex-wrap: wrap;
}
#container > div {
  border: 1px solid;
  padding: 5px;
}

<div id="container">
  <div style="order: 17"></div>
  <div style="order: 25"></div>
  <div style="order: 2"></div>
  <div style="order: 3"></div>
  <div style="order: 17"></div>
  <div style=""></div>
  <div style="order: -17"></div>
  <div style="order: 2"></div>
</div>
If the numbers are ordered, it means JS has iterated the flex items according to their <code>order</code> property.