javascript - 如何将项目值推到选择框中的极端顶部/底部？

Question

我正在研究和测试表格。到目前为止，我成功地使用以下 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 树遍历方法（如果适用）。

提前致谢！

Answer 1

使用prependTo和appendTo

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

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

小提琴

Answer 2

要将其移动到最顶部：

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

要将其移动到最底部：

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

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

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"));
});
}