jquery - 交换 jQuery 中的两个元素

Question

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

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

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

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