jquery - jQuery在父元素内移动DOM元素

Question

有没有一种简单的方法可以将元素移动到它自己的父元素中？

像这样...

从：

<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 附加到特定位置。

Answer 1

你应该能够使用.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 演示

Answer 2

尝试

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

或者

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

记住 :eq() 是从零开始的。

Answer 3

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

演示