jQuery：移动元素位置

Question

在每个div中，有两个按钮：更高和更低。当点击“更高”时，如果这个div不在最高位置，那么它会比原来高。点击“下面”时，元素将会移动到比原来更低的位置。

问题是：如何将元素相对于另一个元素上下移动？

<div> 
    <div id="a1">a1<input name='higher' type='button' value='higher'/><input name='lower' type='button' value='lower'/></div> 
    <div id="a2">a2<input name='higher' type='button' value='higher'/><input name='lower' type='button' value='lower'/></div> 
    <div id="a3">a3<input name='higher' type='button' value='higher'/><input name='lower' type='button' value='lower'/></div> 
</div> 

Answer 1

你可以尝试这样的事情：http://www.jsfiddle.net/yijiang/hwPPP/

随着insertAfter和insertBefore我们可以上下移动按钮的父母。

$('#list').delegate('input[type="button"]', 'click', function() { 
    var parent = $(this).parent(); 

    if(this.value === 'higher'){ 
     parent.insertBefore(parent.prev()); 
    } else { 
     parent.insertAfter(parent.next()); 
    } 

    return false; 
}); 

Answer 2

也许你应该考虑像jQueryUI的可排序：

http://jqueryui.com/demos/sortable/

否则，你可以使用下一个（）/上一个（）和的insertBefore（）/ insertAfter（）jQuery的功能整合在一起：

$("#a1").insertAfter($('#a1').next());