jQuery переместить элемент DOM внутри родителя

есть ли простой способ переместить элемент внутри собственного родителя?

такой...

from:

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

в:

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

либо переместите div вверх или вниз на один шаг, либо с помощью индекса в appendTo в определенном положении.

3 ответов


вы должны иметь возможность использовать .prev() и .next() как это (здесь как функция 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


попробовать

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

или

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

помня, что: eq() основан на нуле.


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

демо