Javascript 如何根据订单号确定flex项目的目标？

我需要以编程的方式重新排列容器中的flex项目，但我似乎找不到如何根据它们的

顺序

编号来选择它们。问题是它们不是按DOM顺序显示，而是使用

order

css属性

如何重新排列它们

我的html：

<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 |

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

| A | B | C | D | E|
+----------->
所以，我有了一个滥用CSS3选择器的想法，它似乎起了作用，尽管我想知道这有多合法

然后要交换两个项目，我需要执行以下操作：

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

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

您可以根据flex项目的计算顺序对其进行排序

请注意，如果两个flex项具有相同的
顺序
，则应根据其DOM位置对其进行排序。也就是说，排序必须是稳定的。由于
[].sort
不一定是稳定的，因此我将使用的自定义实现

var orderedChildren=mergeSort（[].map.call）(
document.getElementById（'container'）。子项，
功能（儿童）{
return[child，+getComputedStyle（child.order）]；
}
)).map（函数（对）{
返回对[0]；
});
函数合并排序（arr）{
var m=数学楼层（arr.length/2）；
如果（！m）返回arr；
var arr2=合并排序（arr.splice（m）），
arr1=合并排序（arr.splice（0））；
while（arr1.length&&arr2.length）
arr.push（（arr1[0][1]>arr2[0][1]？arr2:arr1.shift（））；
返回arr.concat（arr1，arr2）；
}


var orderedChildren=mergeSort（[].map.call）(
document.getElementById（'container'）。子项，
功能（儿童）{
return[child，+getComputedStyle（child.order）]；
}
)).map（函数（对）{
返回对[0]；
});
函数合并排序（arr）{
var m=数学楼层（arr.length/2）；
如果（！m）返回arr；
var arr2=合并排序（arr.splice（m）），
arr1=合并排序（arr.splice（0））；
while（arr1.length&&arr2.length）
arr.push（（arr1[0][1]>arr2[0][1]？arr2:arr1.shift（））；
返回arr.concat（arr1，arr2）；
}
对于（变量i=0；i div{
边框：1px实心；
填充物：5px；
}

如果数字是有序的，这意味着JS已经根据flex项的
顺序
属性迭代了flex项。
如果保证每个flex项都有自己的序号的样式属性，并且样式声明本身是一致编写和/或序列化的，那么这将非常有效。不幸的是，否则您将uld已经能够通过使用数据属性替换内联样式并使用类似于
#container>div{order:attr（数据顺序整数）；}
的东西，使这一点更加清晰。