jQuery sắp xếp thứ tự li bằng cách nhấp vào liên kết

Question

Cần thay đổi vị trí li bằng cách nhấp để di chuyển lên hoặc di chuyển xuống.

<div> 
    <ul> 
    <li>Item1 <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li> 
    <li>Item2 <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li> 
    <li>Item3 <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li> 
    <li>Item4 <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li> 
    <li>Item5 <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li> 
    </ul> 
</div> 

Vì vậy, những gì nên xảy ra ở đây, ví dụ, nếu chúng ta nhấp vào Chuyển lên trên Item2, Khoản 2 sẽ di chuyển lên trước Khoản 1.

Tôi tryed để làm như thế này, nhưng nó không công việc:

$(".moveUp").click(function() { 
    var thisLine = $(this).parent(); 
    var prevLine = thisLine.prev(); 
    prevLine.insertAfter(thisLine); 
}); 

Hope một số ai có thể giúp tôi ...

Answer 1

này nên làm việc và cũng sẽ không di chuyển yếu tố bên ngoài của UL khi bạn cố gắng và di chuyển nó lên ở phía trên hoặc xuống phía dưới:

$('.moveUp').click(function(){ 
    var liItem = $(this).parent(); 
    if (liItem.prev().is('li')) 
    { 
     liItem.insertBefore(liItem.prev()) 
    } 
}); 

$('.moveDown').click(function(){ 
    var liItem = $(this).parent(); 
    if (liItem.next().is('li')) 
    { 
     liItem.insertAfter(liItem.next()) 
    } 
}); 

Ví dụ làm việc: http://jsfiddle.net/BDecp/

Ngoài ra, mã của bạn nên được bọc với điều này:

$(document).ready(function() { 
    //Code Here 
}); 

Answer 2

Hãy thử điều này:

Làm việc jsFiddle here.

Answer 3

Hãy thử điều này.

$(".moveUp").click(function() { 
    var $parent = $(this).parent(); 
    $parent.prev().before($parent); 
}); 
$(".moveDown").click(function() { 
    var $parent = $(this).parent(); 
    $parent.next().after($parent); 
}); 

bản demo làm việc - http://jsfiddle.net/vQmHU/

Answer 4

http://jsfiddle.net/j7xtS/2/

$('ul').on('click', 'a', function(){ 
    var $this = $(this), 
     $li = $this.parent(); 

    if ($this.hasClass('moveUp') && $li.prev().length>0){ 
     $li.prev().before($li[0]); 
    } 
    else if ($this.hasClass('moveDown') && $li.next().length>0){ 
     $li.next().after($li[0]); 
    } 
});​ 

Answer 5

này chỉ sắp xếp lại danh sách các mục:

$(".moveUp").click(function() { 
    var $parent = $(this).parent().closest("li"); 
    $parent.prev().before($parent); 
}); 

$(".moveDown").click(function() { 
    var $parent = $(this).parent().closest("li"); 
    $parent.next().after($parent); 
});