使用 JavaScript 更改 div 顺序答案

【问题标题】：change divs order with javaScript使用 JavaScript 更改 div 顺序
【发布时间】：2019-01-29 21:32:44
【问题描述】：

我有这样的代码：

<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。

【问题讨论】：

标签： javascript html

【解决方案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/

【讨论】：

【解决方案2】：

另一种解决方案，无需添加新的div 并使用insertBefore()。刚刚给父母div 一个id。

在父div的第一个孩子之前插入

$(".flex").click(function() {
  var element = document.getElementById('main').children[0];
  if (!($(this)).is(element)) { //Checks if its first div or not
    $(this).insertBefore(element);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="main">
  <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>

注意：使用jQuery 1.7.2

【讨论】：