在jQuery中交换两个元素答案

【问题标题】：Swap two elements in jQuery在jQuery中交换两个元素
【发布时间】：2013-05-30 20:34:38
【问题描述】：

我正在尝试使用向上和向下箭头交换两个元素。

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 插件。

【问题讨论】：

你能做一个小提琴吗？
您的“el”变量在这里以两种不同的方式使用。
el 不是点击的元素，而是事件。 this 是被点击的元素。
Is there a native jQuery function to switch elements? 的可能重复项

标签： jquery sorting swap

【解决方案1】：

你可以这样做 - 你需要检查 e.target 而不是 div class= move

jQuery('.move').children().click(function (e) { // <-- argument passed in is the event not an element
    var $div = $(this).closest('.item'); // get closest item div
    if (jQuery(e.target).is('.move-down')) { // check if clicked is movedown
        $div.next('.item').after($div); // if it is move after next
    } else {
        $div.prev('.item').before($div);// else move it before previous
    }
});

FIDDLE

【讨论】：

【解决方案2】：

我可能会这样做：

$(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/

【讨论】：

【解决方案3】：

尝试：

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);
    }
});

【讨论】：

【解决方案4】：

我在寻找同一问题的答案时偶然发现了这一点：

Is there a native jQuery function to switch elements?

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

【讨论】：