Phần tử DOM di chuyển jQuery bên trong parent

Question

Có cách nào đơn giản để di chuyển một phần tử bên trong chính phần tử cha của nó không?

Như thế này ...

từ:

<div class="test">hello 1</div> 
<div class="test">hello 2</div> 
<div class="test">hello 3</div> 

tới:

<div class="test">hello 1</div> 
<div class="test">hello 3</div> 
<div class="test">hello 2</div> 

Hoặc di chuyển một UP div hoặc XUỐNG một bước, hoặc sử dụng các chỉ số để appendTo trong một cụ thể Chức vụ.

Answer 1

Bạn sẽ có thể sử dụng .prev() và .next() như thế này (đây là một hàm jQuery):

$.fn.moveUp = function() { 
    $.each(this, function() { 
     $(this).after($(this).prev()); 
    }); 
}; 
$.fn.moveDown = function() { 
    $.each(this, function() { 
     $(this).before($(this).next()); 
    }); 
}; 
$("div:eq(2)").moveUp(); //Would move hello 3 up 
$("div:eq(0)").moveDown(); //Would move hello 1 down 

JSFiddle Demo

Answer 2

Hãy thử

$("div:eq(2)").after($("div:eq(0)")); 

hoặc

$("div:eq(2)").before($("div:eq(1)")) 

Luôn nhớ rằng: eq() là không dựa.

Answer 3

var child = $('#parent div'); // keep reference for further use 
child.eq(2).insertBefore(child.eq(1)); 

DEMO