jquery - jQuery で 2 つの要素を交換する

Question

上矢印と下矢印を使用して 2 つの要素を交換しようとしています。

JSFiddle ソリューションは素晴らしいでしょう!

私のHTML：

<div class="item">
    <div class="content">Some text</div>
    <div class="move">
        <div class="move-down">down</div>
    </div>
</div>
<div class="item">
    <div class="content">Some other text</div>
    <div class="move">
        <div class="move-up">up</div>
        <div class="move-down">down</div>
    </div>
</div>
<div class="item">
    <div class="content">Some text</div>
    <div class="move">
        <div class="move-up">up</div>
        <div class="move-down">down</div>
    </div>
</div>
<div class="item">
    <div class="content">Some other text</div>
    <div class="move">
        <div class="move-up">up</div>
    </div>
</div>

私の最後の試みは：

// el is the clicked one.
jQuery('.move').children().click(function(el) {
    if (jQuery(el).hasClass('move-down') === true) {
        el = jQuery(el).parent().parent();
        el.prependTo(el.after(el));
    } else {
        el = jQuery(el).parent().parent();
        el.appendTo(el.before(el));
    }
});

アイテムを変更するために、さまざまな方法を試しました。replaceWith()、before()、および で試しましafter()たが、何も機能しませんでした。

注意: 正しい上下の DIV を表示する関数を既に作成しています。したがって、最初と最後のものは一方向にしか移動できません。それはもう解決しました。また、既存の jQuery プラグインは一切使用できません。

Answer 1

私はおそらく次のようなことをするでしょう：

$(document).ready(function () {
    $('.move-down').click(function (e) {
        var self = $(this),
            item = self.parents('div.item'),
            swapWith = item.next();
        item.before(swapWith.detach());
    });
    $('.move-up').click(function (e) {
        var self = $(this),
            item = self.parents('div.item'),
            swapWith = item.prev();
        item.after(swapWith.detach());
    });
});

これが実際の例です：http://jsfiddle.net/a6Se4/

Answer 2

試す：

jQuery('.move > div').on('click', function(event) {
    var item = jQuery(this).closest('div.item');
    if(jQuery(this).hasClass('move-down')) {
        item.prev('div.item').before(item);
    } else {
        item.next('div.item').after(item);
    }
});

Answer 3

同じ質問に対する答えを探しているときに、これに出くわしました。

要素を切り替えるためのネイティブ jQuery 関数はありますか?

jQuery("#element1").before(jQuery("#element2"));
or
jQuery("#element1").after(jQuery("#element2"));