Swap two elements in jQuery

Question

I'm trying to swap two elements using up and down arrows.

A JSFiddle solution would be great!

My 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>

My last try was:

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

I've tried a lot of different ways to change items. I've tried with replaceWith(), before(), and after() but nothing worked.

NOTICE: I've already written a function which displays the correct up / down DIVs. So the first and last one can only moved in one direction. That's already solved. I also can't use any kind of existing jQuery plugins.

your 'el' variable is being used in two different ways here. — Derek, May 30 '13 at 20:41
`el` is not the element clicked, it's the event. `this` is the element clicked. — Barmar, May 30 '13 at 20:55
possible duplicate of [Is there a native jQuery function to switch elements?](http://stackoverflow.com/questions/698301/is-there-a-native-jquery-function-to-switch-elements) — user, Mar 02 '14 at 07:47

score 9 · Accepted Answer · answered May 30 '13 at 20:47

You can do it like this - you need to check e.target not the div with 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

score 3 · Answer 2 · answered May 30 '13 at 21:17

I'd probably do something like this:

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

Here's a working example: http://jsfiddle.net/a6Se4/

Derek · Answer 3 · 2013-05-30T21:02:57.993

2

try:

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

edited May 30 '13 at 21:02

answered May 30 '13 at 20:44

Derek

4,575
3
22
36

Stilmittel · Answer 4 · 2020-07-03T15:52:37.377

1

I stumbled upon this while I was looking for an answer to the same question:

Is there a native jQuery function to switch elements?

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

edited Jul 03 '20 at 15:52

answered Mar 24 '14 at 23:10

Stilmittel

60
7

Swap two elements in jQuery

4 Answers4

Linked