Question

我有几个div，我希望能够通过使用按钮重新排序。这些按钮将被称为“向上移动”和“向下移动”。

我想隐藏第一个div上的“向上移动”按钮和最后一个div上的“向下移动”按钮（或者如果只有一个div则隐藏它们）。容器中不能有div，1,2或许多。

HTML看起来像这样：

<div id="container">
    <div id="div0">
        <button class="btn-move-up">Move up</button>
        <button class="btn-move-down">Move down</button>
    </div>
    <div id="div1">
        <button class="btn-move-up">Move up</button>
        <button class="btn-move-down">Move down</button>
    </div>
    <div id="div2">
        <button class="btn-move-up">Move up</button>
        <button class="btn-move-down">Move down</button>
    </div>
</div>

我如何使用jQuery实现这一目标？

Answer 1

我建议：

$('button').click(
    function(e) {
        e.preventDefault();
        var parent = $(this).closest('div');
        if ($(this).hasClass('btn-move-up')) {
            parent.insertBefore(parent.prev('div'));
        }
        else if ($(this).hasClass('btn-move-down')) {
            parent.insertAfter(parent.next('div'));
        }
    });

JS Fiddle demo

编辑添加省略的功能（隐藏相关按钮）：

function firstAndLast(container) {
    if (!container) {
        return false;
    }
    else {
        container.find('button:disabled').prop('disabled', false);
        container.find('button.btn-move-up:first').prop('disabled', true);
        container.find('button.btn-move-down:last').prop('disabled', true);
    }
}

firstAndLast($('#container'));

$('button').click(
    function(e) {
        e.preventDefault();
        var parent = $(this).closest('div'),
            grandparent = $(this).closest('#container');
        if ($(this).hasClass('btn-move-up')) {
            parent.insertBefore(parent.prev('div'));
            firstAndLast(grandparent)
        }
        else if ($(this).hasClass('btn-move-down')) {
            parent.insertAfter(parent.next('div'));
            firstAndLast(grandparent)
        }
    });

JS Fiddle demo

关于button元素实际上未被使用的启示而编辑。相反，我们现在使用a元素：

function firstAndLast(container) {
    if (!container) {
        return false;
    }
    else {
        container.find('a.disabled').removeClass('disabled')
        container.find('a.btn-move-up:first').addClass('disabled');
        container.find('a.btn-move-down:last').addClass('disabled');
    }
}

firstAndLast($('#container'));

$('a').click(
    function(e) {
        var that = $(this);
        if (!that.hasClass('disabled')) {
            e.preventDefault();
            var parent = $(this).closest('div'),
                grandparent = $(this).closest('#container');
            if ($(this).hasClass('btn-move-up')) {
                parent.insertBefore(parent.prev('div'));
                firstAndLast(grandparent)
            }
            else if ($(this).hasClass('btn-move-down')) {
                parent.insertAfter(parent.next('div'));
                firstAndLast(grandparent)
            }
        }
    });

JS Fiddle demo

参考文献：

Answer 2

以下是接受答案的简洁版本，并进行了一些更正。

function firstAndLast(container) {

    if (!container) {

        return false;

    } else {

        container.find('a.btn-move-up, a.btn-move-down').show();
        container.find('a.btn-move-up:first').hide();
        container.find('a.btn-move-down:last').hide();
    }
}

firstAndLast($('#container'));

$('.btn-move-up, .btn-move-down').click(function(e) {

    e.preventDefault();

    var parent = $(this).closest('div'), grandparent = $(this).closest('#container');

    if ($(this).hasClass('btn-move-up')) {

        parent.insertBefore(parent.prev('div'));
        firstAndLast(grandparent);

    } else if ($(this).hasClass('btn-move-down')) {

        parent.insertAfter(parent.next('div'));
        firstAndLast(grandparent);
    }
});

jQuery交换div命令

2 个答案: