2016-12-04 30 views
-1

div要素を上下に移動できます。この場合、jQueryソート可能な要素は手動で移動する必要があるためです。ここで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()); 
    } 
}); 

上記作品の一部、ダウンソートは罰金ですが、アップ、すべての一番上の行は、ページの最上部に消えますbodyタグの先頭に追加されます。

+0

:すべては親コンテナ

<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にすべての要素をラップする必要がありますか?あなたのコードはブラウザでそのまま動作します –

答えて

0

実際に私は考え出した。あなたが使用しているブラウザとjQuery

$(".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; 
}); 
関連する問題