Is there a native jQuery function to switch elements?

Is there a native jQuery function to switch elements?

Can I easily swap two elements with jQuery?
I’m looking to do this with one line if possible.
I have a select element and I have two buttons to move up or down the options, and I already have the selected and the destination selectors in place, I do it with an if, but I was wondering if there is an easier way.

Solutions/Answers:

Solution 1:

I’ve found an interesting way to solve this using only jQuery:

$("#element1").before($("#element2"));

or

$("#element1").after($("#element2"));

🙂

Solution 2:

Paulo’s right, but I’m not sure why he’s cloning the elements concerned. This isn’t really necessary and will lose any references or event listeners associated with the elements and their descendants.

Here’s a non-cloning version using plain DOM methods (since jQuery doesn’t really have any special functions to make this particular operation easier):

function swapNodes(a, b) {
    var aparent = a.parentNode;
    var asibling = a.nextSibling === b ? a : a.nextSibling;
    b.parentNode.insertBefore(a, b);
    aparent.insertBefore(b, asibling);
}

Solution 3:

No, there isn’t, but you could whip one up:

jQuery.fn.swapWith = function(to) {
    return this.each(function() {
        var copy_to = $(to).clone(true);
        var copy_from = $(this).clone(true);
        $(to).replaceWith(copy_from);
        $(this).replaceWith(copy_to);
    });
};

Usage:

$(selector1).swapWith(selector2);

Note this only works if the selectors only match 1 element each, otherwise it could give weird results.

Related:  What is the difference between browserify/requirejs modules and ES6 modules [closed]

Solution 4:

There are a lot of edge cases to this problem, which are not handled by the accepted answer or bobince’s answer. Other solutions that involve cloning are on the right track, but cloning is expensive and unnecessary. We’re tempted to clone, because of the age-old problem of how to swap two variables, in which one of the steps is to assign one of the variables to a temporary variable. The assignment, (cloning), in this case is not needed. Here is a jQuery-based solution:

function swap(a, b) {
    a = $(a); b = $(b);
    var tmp = $('<span>').hide();
    a.before(tmp);
    b.before(a);
    tmp.replaceWith(b);
};

Solution 5:

Many of these answers are simply wrong for the general case, others are unnecessarily complicated if they in fact even work. The jQuery .before and .after methods do most of what you want to do, but you need a 3rd element the way many swap algorithms work. It’s pretty simple – make a temporary DOM element as a placeholder while you move things around. There is no need to look at parents or siblings, and certainly no need to clone…

$.fn.swapWith = function(that) {
  var $this = this;
  var $that = $(that);

  // create temporary placeholder
  var $temp = $("<div>");

  // 3-step swap
  $this.before($temp);
  $that.before($this);
  $temp.after($that).remove();

  return $this;
}

1) put the temporary div temp before this

2) move this before that

3) move that after temp

3b) remove temp

Then simply

$(selectorA).swapWith(selectorB);

DEMO: http://codepen.io/anon/pen/akYajE

Related:  Do you know any tutorial for mongoDB in nodeJS? [closed]

Solution 6:

You shouldn’t need two clones, one will do. Taking Paolo Bergantino answer we have:

jQuery.fn.swapWith = function(to) {
    return this.each(function() {
        var copy_to = $(to).clone(true);
        $(to).replaceWith(this);
        $(this).replaceWith(copy_to);
    });
};

Should be quicker. Passing in the smaller of the two elements should also speed things up.