javascript - 使用 jquery 垂直重组 div

Question

我有 5 个 div 垂直向下放置一个页面。

我希望能够单击任何一个，并让它成为顺序中的第一个 div，在某种程度上是“列表”的顶部。在一个完美的世界中，其他人会变暗/降低不透明度，被点击的人会滑动/动画到顶部，而其他人则向下撞。但是，那可以晚点来。我见过使用 CSS 完成的 div 重新排序，但这在页面上并不是持续动态的。

我尝试将所有 5 个 div 放入容器包装器中并在 css 中执行此操作:

#wrapper { 显示:表格； }

使用此 javascript(单击第二个 div 的示例):

$('#secondDiv').css("display","table-header-group");
$('#firstDiv').css("display","table-row-group");
$('#thirdDiv').css("display","table-row-group");
$('#fourthDiv').css("display","table-row-group");
$('#fifthDiv').css("display","table-row-group");

但这弄乱了我在 div 上的圆 Angular 、我的对齐方式以及我现有 CSS 的其他部分。

这似乎不应该那么难，但我想不通。感谢您的帮助!

Answer 1

一个非常简单的解决方案:使用 jQuery 的 prepend() 将元素移动到父元素的顶部。

$("div").click(function() {    
    $(this).parent().prepend($(this));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Div1</div>
<div>Div2</div>
<div>Div3</div>
<div>Div4</div>
<div>Div5</div>
<div>Div6</div>
<div>Div7</div>
<div>Div8</div>
<div>Div9</div>
<div>Div10</div>