jQuery上下移動元素

Question

我希望能夠向上/向下移動div元素，在這種情況下，我不能使用jQuery可排序，因爲元素需要手動移動一次。

這裏是我的html：

<div>First <a class="up">UP</a> | <a class="down">DOWN</a></div> 
<div>Second <a class="up">UP</a> | <a class="down">DOWN</a></div> 
<div>Third <a class="up">UP</a> | <a class="down">DOWN</a></div> 
<div>Fourth <a class="up">UP</a> | <a class="down">DOWN</a></div> 

這裏是JS：

$(".up,.down").click(function(){ 
    var row = $(this).parent("div"); 
    if ($(this).is(".up")) { 
     row.insertBefore(row.prev()); 
    } else { 
     row.insertAfter(row.next()); 
    } 
}); 

上述工作部分，整理下來是好的，但最多，每頂行消失在頁面的頂部，前置於身體標籤。

Answer 1

其實我已經想通了。所有需要的所有元素包裝成一個父容器

<section> 
    <div>First <a class="up">UP</a> | <a class="down">DOWN</a></div> 
    <div>Second <a class="up">UP</a> | <a class="down">DOWN</a></div> 
    <div>Third <a class="up">UP</a> | <a class="down">DOWN</a></div> 
    <div>Fourth <a class="up">UP</a> | <a class="down">DOWN</a></div> 
</section> 

和javascript：

$(".up").click(function(){ 
    var $current = $(this).closest('div') 
    var $previous = $current.prev('div'); 
    if($previous.length !== 0){ 
    $current.insertBefore($previous); 
    } 
    return false; 
}); 

$(".down").click(function(){ 
    var $current = $(this).closest('div') 
    var $next = $current.next('div'); 
    if($next.length !== 0){ 
    $current.insertAfter($next); 
    } 
    return false; 
});