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

Question

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

How do I rearrange them?

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

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;