如何在選擇框中將項目值推到極限頂部/底部？

Question

我正在研究和測試的形式。到目前爲止，我成功地在following fiddle中將選擇框列表中的項目逐個上下移動。

的代碼實例（拉昇）：

function moveUp() { 
$("#list-box option:selected").each(function() { 
    var listItem = $(this); 
    var listItemPosition = $("#list-box option").index(listItem) + 1; 

    if (listItemPosition == 1) return false; 

    listItem.insertBefore(listItem.prev()); 
    }); 
} 

但現在我需要移動選擇的值，無論是在列表中的最頂端或者最底部。如果它適用，請嘗試試驗這個小提琴，並建議我可以使用jQuery tree traversal方法。

在此先感謝！

Answer 1

將它移動到頂部：

var listItem = $(this); 
    listItem.insertBefore(listItem.siblings().first()); 

將其移動到最底層：

var listItem = $(this); 
    listItem.insertBefore(listItem.siblings().last()); 

http://jsfiddle.net/mblase75/cYw6R/

Answer 2

使用prependTo和appendTo

function moveTop(){ 
    $('#list-box option:selected').prependTo('#list-box'); 
} 

function moveBottom(){ 
    $('#list-box option:selected').appendTo('#list-box'); 
} 

FIDDLE

Answer 3

http://jsfiddle.net/b7Yct/7/

你需要改變你的insertBefore和insertAfter語句的第一個選項之前和最後一個選項後插入。

function moveUp() { 
$("#list-box option:selected").each(function() { 
    var listItem = $(this); 
    var listItemPosition = $("#list-box option").index(listItem) + 1; 

    if (listItemPosition == 1) return false; 

    listItem.insertBefore($("#list-box option:first")); 
}); 
} 

function moveDown() { 
var itemsCount = $("#list-box option").length; 

$($("#list-box option:selected").get().reverse()).each(function() { 
    var listItem = $(this); 
    var listItemPosition = $("#list-box option").index(listItem) + 1; 

    if (listItemPosition == itemsCount) return false; 

    listItem.insertAfter($("#list-box option:last")); 
}); 
}