jQuery 向下移动列表框中的多个项目

Question

我有一个列表框，其中有两个按钮来控制所包含项目的优先级。除了选择多个项目时的下移逻辑之外，一切正常。

如果选择了两个项目，则不会发生任何事情，如果选择了三个或更多项目，则只有底部的一个移动..是否有一种简单的方法可以使用 jQuery 来处理此问题？

当前实现:

<div id="selected">
    <div><strong>Selected</strong></div>
    <div id="selected-items">
        <input type="select" multiple="multiple" id="selected-items-select">
            <option/>
        </input> 
    </div>
</div>

<div id="priority" style="display: none;">
    <div><input type="button" id="move-up" value="^" /></div>
    <div><input type="button" id="move-down" value="v" /></div>
</div>

<script type="text/javascript">

    $(document).ready(function () {
        $('#move-up').click(moveUp);
        $('#move-down').click(moveDown);
    });

    function moveUp() {
        $('#selected-items select :selected').each(function (i, selected) {
            $(this).insertBefore($(this).prev());
        });
        $('#selected-items select').focus().blur();
    }

    function moveDown() {
        $('#selected-items select :selected').each(function (i, selected) {
            $(this).insertAfter($(this).next());
        });
        $('#selected-items select').focus().blur();
    }
</script>

另外，请注意 $('#selected-items select').focus().blur(); 行..我有它，因为有时优先级不会更新，直到列表框获得焦点。有没有更干净的方法来做到这一点？

Answer 1

当您尝试向下移动多个项目时，您会按从上到下的顺序循环遍历它们。不幸的是，这意味着您要将第一个选定的项目移动到第二个选定的项目之后，然后将第二个选定的项目移动到第一个选定的项目之后，从而不会发生任何变化。

我使用 here 中的技巧解决了这个问题向下移动时向后循环选择。

更新:添加了一个测试来查看您是否已将选择移至顶部或底部以避免重新选择:http://jsfiddle.net/FBTVk/1/

function moveUp() {
    $('#selected-items select :selected').each(function(i, selected) {
        if (!$(this).prev().length) return false;
        $(this).insertBefore($(this).prev());
    });
    $('#selected-items select').focus().blur();
}

function moveDown() {
    $($('#selected-items select :selected').get().reverse()).each(function(i, selected) {
        if (!$(this).next().length) return false;
        $(this).insertAfter($(this).next());
    });
    $('#selected-items select').focus().blur();
}