javascript - 使用 jQuery 对 div 元素进行排序？

Question

我有以下 html 结构:

<div id='main'>
    <div id='612'>
    </div>
    ...
    <div id='1'>
    </div>
</div>

正如你所看到的，我有几个 div 按降序排列，我希望制作一个按钮来激活 jQuery 脚本，该脚本可以以两种方式(递减和递增)对这些 div 进行排序。我已经创建了按钮并将其链接到脚本，但我找不到对 div 进行排序的方法。可能吗？

编辑:将完整代码发布到pastebin上: https://pastebin.com/DZWdNMZk

编辑:如果有帮助的话，将完整代码发布到 Github 上: https://github.com/mattiac02/divs

Answer 1

这是一种选择。将父级的显示设置为flex，然后使用js设置子级的order属性。希望演示有所帮助!

document.querySelector("#orderEm")
  .addEventListener("click", () => {
    document.querySelectorAll("div > div")
      .forEach(div => {
        div.style.order = div.id;
      });
  });
document.querySelector("#reverse")
  .addEventListener("click", () => {
    document.querySelector("#container")
      .classList.toggle("reverse");
  });

#container {
  display: flex;
  justify-content: space-around;
}

#container.reverse {
  flex-direction: row-reverse;
}

div > div {
  height: 50px;
  width: 50px;
  font-size: 15pt;
  border: 1px solid black;
  margin: 1em;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="container" data-sorted="unsorted">
  <div id="2">2</div>
  <div id="3">3</div>
  <div id="1">1</div>
</div>
<button id="orderEm">Order 'Em!</button>
<button id="reverse">Reverse 'Em!</button>