javascript - 使用 JavaScript 更改 div 顺序

Question

我有这样的代码:

<div>
<div id="div1" class="flex">test 1</div>
<div id="div2" class="flex">test 2</div>
<div id="div3" class="flex">test 3</div>
<div id="div4" class="flex">test 4</div></div>

如何执行以下操作:当有人单击具有“flex”类的 div 时，该 div 会转到“列表”的顶部。例如，如果我单击 id 为“div3”的 div，则元素的顺序应为:div3、div1、div2、div4。

我不想附加父 div 或内部 HTML。

Answer 1

您需要在 div 之前添加一个 id 为 #first 的 div，然后使用 jQuery 的 insertAfter()

$(".flex").click(function() {
    $(this).insertAfter( "#first" );
});

<div>
    <div id="first"></div>
    <div id="div1" class="flex">test 1</div>
    <div id="div2" class="flex">test 2</div>
    <div id="div3" class="flex">test 3</div>
    <div id="div4" class="flex">test 4</div>
</div>

https://jsfiddle.net/joe_young/etgm865x/