dans.blog: A quick and dirty swap() method for jQuery

A few weeks ago I needed a jQuery swap() function for some drag and drop code I was writing. While it would have been easy enough to whip up a quick little function, I found this little snippet courtesy of Brandon Aaron's blog:

jQuery.fn.swap = function(b){
    b = jQuery(b)[0];
    var a = this[0];
    var t = a.parentNode.insertBefore(document.createTextNode(''), a);
    b.parentNode.insertBefore(a, b);
    t.parentNode.insertBefore(b, t);
    t.parentNode.removeChild(t);
    return this;
};

This particular method only works with the first DOM element in each of the jQuery objects. Using the code is easy enough, the following example would swap the first and last nodes in an unordered list who's id is "list".

$('ul#list > li:first').swap('ul#list > li:last');

Categories: jQuery

7 Comments

Joseph McCullough
Sep 12, 2010 @ 5:19 AM

Cool function. If you're wanting to swap two elements selected within a jQuery object, you can use this method

http://www.vertstudios.com/blog/swap-jquery-plugin...
Nico FLemming
Sep 29, 2010 @ 2:51 AM

Events and a possible focus (if swapepd object ist an input field) will be lost during swapping!
Alexander Hjelmeseth
Feb 11, 2011 @ 3:02 PM

Thanks. A neat function. Tried to do this in php when i figured it might be someone who'd made a solution with jquery. If you want to swap specific items, you have to add classes or id's to these. It's also possible to swap between different ul's as long as they share the same class-name.
Axel
Feb 14, 2011 @ 9:13 AM

Events won't be lost if you use live()
Ryan Charmley
Aug 24, 2011 @ 3:42 PM

Worked like a dream! Thank you!!!
dhanesh mane
Sep 23, 2011 @ 12:49 PM

I did it simply using following code..

element1 = $("#element1");
element2 = element1.next();
element2.insertBefore("#element1");

works everywhere, if u want to swap two elements.. no effects:)
Aleksandar
Feb 6, 2013 @ 8:36 AM

How to get id of target( swapp) div ?

Comments for this entry have been disabled.