изменения DIVS заказа с JavaScript

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> 

Как сделать что-то линию, что: когда кто-то нажимает на DIV с «гибким» классом, это Див идти к вершине «список» , Например, если я нажимаю div с id «div3», порядок элементов должен быть: div3, div1, div2, div4.

Я не хочу добавлять родительский div или внутренний HTML.

Answer 1

Вам нужно будет добавить DIV с идентификатором #first перед дивы, а затем использовать 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/

Answer 2

Другое решение JQuery без добавления нового div и использования insertBefore(). Только что дано id родительскому div.

Установка перед первым ребенком родителя 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