jquery - jQuery 交换 div 顺序

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 实现这一点？

score 7 · Accepted Answer

我建议：

$('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 小提琴演示。

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

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 小提琴演示。

编辑关于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 小提琴演示。

参考：

score 1 · Accepted Answer

这是已接受答案的干净版本，并进行了一些更正。

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 - jQuery 交换 div 顺序

2 回答 2

Related

Reference