【发布时间】：2020-05-05 22:21:32
【问题描述】：
我有以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>StackOverflow Question</title>
<style>
.container--wrap {
background-color: #000000;
border-radius: 15px;
margin: 5px;
overflow: hidden;
justify-content: stretch;
align-items: flex-end;
}
.scroller2{
height: 250px;
overflow-y: scroll;
}
.circle {
position: relative;
margin-bottom: 40px;
height: 20px;
display: flex;
align-items: center;
}
.circle::before {
content:"";
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 5px;
}
.circle::after {
position: absolute;
content: '';
left: 7.5px;
top: 20px;
width: 5px;
background: #4d4d4d;
height: 40px;
}
.minor::before {
background-color: purple;
}
.major::before {
background-color: red;
}
.gray::before {
background-color: gray;
}
.tlbtn {
background-color: #343434;
border-radius: 10px;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: robotobold;
}
#tltitle,.tlbtn{
display: inline-flex;
}
</style>
</head>
<body>
<script>
function btn1Click() {
document.getElementById("btn1").style.backgroundColor="#5c5c5c";
document.getElementById("btn2").style.backgroundColor="#343434";
}
function btn2Click() {
document.getElementById("btn2").style.backgroundColor="#5c5c5c";
document.getElementById("btn1").style.backgroundColor="#343434";
}
</script>
<div class="container--wrap-scroll scroller2" id="timeline">
<p id="tltitle" style="color: #D4E1E4; font-size: 20px; text-align: left; padding-top: 0px; padding-right: 10px;color: black;"><b>Timeline</b></p>
<div id="btn1" class="tlbtn" style="margin-bottom: -10px; background-color: #5c5c5c;" onclick="btn1Click();"><text style="font-size: 15px; font-family: robotobold;text-align: center;">Newest</text></div>
<div id="btn2" class="tlbtn" style="margin-bottom: -10px;" onclick="btn2Click();"><text style="font-size: 15px; font-family: robotobold; text-align: center;">Oldest</text></div>
<div class="circle major "><text style="color:red; font-family:robotolight; font-size: 12px;">Major Event | Yesterday</text></div>
<div class="circle gray"><text style="color:black; font-family:robotolight; font-size: 12px;">Information | 2 days ago</text></div>
<div class="circle gray"><text style="color:black; font-family:robotolight; font-size: 12px;">Information | 1 week ago</text></div>
<div class="circle minor"><text style="color:purple; font-family:robotolight; font-size: 12px;">Minor Event | 1 month ago</b></text></div>
</div>
</body>
</html>当按下“最旧”时，我希望 div 元素的顺序反向排序 - 请注意最后一个圆圈在其下方有一条线，我希望它保持不变：
例如当按下 OLDEST 时，Major Event 将位于底部，并且下方也有一条灰线。
有什么办法可以做到吗？
截图：
【问题讨论】：
-
如果您将
div元素保留在一个数组中，那么您所要做的就是反转数组。 -
好吧，Array.from(parent.childNodes).reverse() 并不是什么大问题
-
您最初要求将其倒置...所以我为您准备了这个：jsfiddle.net/6xnhs84w:D
-
@ScottMarcus 标题中引用的答案包含近 10 年前的解决方案。 Danzinger 的提议是最新的答案。 2011 年还没有 Flexbox！
-
我不得不说，flexbox 可能是我最喜欢的解决方案。 flexbox 真是天赐之物。但是，公平地说，这仍然是一个骗局。你可以随时把它发到那里，这个仍然可以被点赞和接受。
标签： javascript html css