我有以下 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
最佳答案
这是一种选择。将父级的显示设置为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>
关于javascript - 使用 jQuery 对 div 元素进行排序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69321652/