jQuery mueve el elemento DOM dentro del elemento primario

Question

¿Hay una manera simple de mover un elemento dentro de su propio elemento primario?

Así ...

de:

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

a:

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

Cualquiera de mover un div arriba o hacia abajo un paso, o utilizando el índice de appendTo en una específica posición.

Answer 1

Usted debe ser capaz de utilizar .prev() y .next() como esto (en este caso en función de 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

Trate

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

o

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

Recordando que: eq() es cero basado.

Answer 3

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

DEMO