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());