jquery - jQueryスワップdivオーダー

Question

ボタンを使用して並べ替えできるようにしたい div がいくつかあります。これらのボタンは、「上へ移動」および「下へ移動」と呼ばれます。

最初のdivの「上に移動」ボタンと最後のdivの「下に移動」ボタンを非表示にしたい(または、divが1つしかない場合は両方を非表示にする)。コンテナー内に 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