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

使用prependTo和appendTo

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

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

FIDDLE

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

如何在选择框中将项目值推送到极限顶部/底部？

3 个答案: