jquery swap content between two DOM elements

Question

I have two span tags. I'd like to swap the content between them once the user clicks on one of them. If the user clicks once more, swap the content again and so on.

$(".sectionTitleText").livequery("click", function () {
        var editor = $(this).attr("data-edit-id");
        var viewer = $(this).attr("data-view-id");

        //Swap code
});

@jnpcl I rather think that's what he's asking for help with! — Alnitak, Jun 17 '11 at 20:59
Yes, they are siblings. I thought there was a function in JQuery to swap the content I did not know of. — Carlos Blanco, Jun 17 '11 at 21:02
@tou - please show the markup - if there's only two children in that parent the answer could be trivial... — Alnitak, Jun 17 '11 at 21:05
No, livequery is a plugin to which does the same thing as live, but also for elements gotten through AJAX. There are several items of this in the page — Carlos Blanco, Jun 17 '11 at 21:20
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:46

Alnitak · Answer 1 · 2011-06-17T21:20:40.000

If both nodes are the only children of the same parent, just do this:

$('#parent').prepend($('#parent').children().last());

This should take whichever element is currently last, and make it first.

See http://jsfiddle.net/alnitak/wt4VZ/ for demo.

If that doesn't apply, try:

var el1 = $('#element1');
var el2 = $('#element2');
var tag1 = $('<span/>').insertBefore(el1); // drop a marker in place
var tag2 = $('<span/>').insertBefore(el2); // drop a marker in place
tag1.replaceWith(el2);
tag2.replaceWith(el1);

The idea here is that the two temporary spans just act as place holders into which the original elements will be dropped, without serialising or otherwise messing with those elements.

See http://jsfiddle.net/alnitak/bzKXn/ for a demo of that.

score 3 · Accepted Answer · answered Jun 17 '11 at 21:01

3

$(".sectionTitleText").livequery("click", function () {
        var editor = $("#span1");  //put your ids here
        var viewer = $("#span2");

        editorContent = editor.clone();
    viewerContent = viewer.clone();

    editor.replaceWith(viewerContent);
    viewer.replaceWith(editorContent);
});

answered Jun 17 '11 at 21:01

Kevin Bowersox

93,289
19
159
189

Is there a swap method in JQuery ? – Julien Jun 17 '11 at 21:03

score 3 · Answer 3 · answered Jun 17 '11 at 21:05

Here's a generic jQuery function to do it:

$.fn.swapWith = function(swap_with_selector) {
    var el1 = this;
    var el2 = $(swap_with_selector);

    if ( el1.length === 0 || el2.length === 0 )
        return;

    var el2_content = el2.html();
    el2.html(el1.html());
    el1.html(el2_content);
};

See this jsFiddle for an example.

score 2 · Answer 4 · answered Jun 17 '11 at 21:01

2

This is a simple content swapping.

var temp = $("#span1").html();
$("#span1").html($("#span2").html());
$("#span2").html(temp);

answered Jun 17 '11 at 21:01

Mokus

10,174
18
80
122

2

not a good idea IMHO to serialise and deserialise the elements when there are perfectly good DOM methods which will move them directly. – Alnitak Jun 17 '11 at 21:07

score 0 · Answer 5 · answered May 23 '13 at 08:45

You can create a temp object :

$element1 = $("#selector1");
$element2 = $("#selector2");

var $temp = $("<div>");
$element2.after($temp);
$element1.after($element2);
$temp.after($element1);
$temp.remove();

It's possible with before() too. It's possible because after() and before() move (or add) object in DOM, not duplicate it.

score 0 · Answer 6 · answered Jun 17 '11 at 21:01

0

You need too keep the text in the span :

var firstText = $('#first_span_id').text()
var secondText = $('#second_span_id').text()

and then swap it :

$('#first_span_id').text(secondText)
$('#second_span_id').text(firstText)

If your span contains html tags, you may want to use .html() instead of .text()

answered Jun 17 '11 at 21:01

Julien

9,312
10
63
86

not a good idea IMHO to serialise and deserialise the elements when there are perfectly good DOM methods which will move them directly. – Alnitak Jun 17 '11 at 21:07

score 0 · Answer 7 · answered Jun 17 '11 at 21:02

I don't know what livequery is, but what about this:

function swapEditView(){
    var temp = $('#data-edit-id').html();
    $('#data-edit-id').html($('#data-view-id').html());
    $('#data-view-id').html(temp);
}

$('#data-edit-id').click(function(){
    swapEditView();
});

$('#data-view-id').click(function(){
    swapEditView();
});

jquery swap content between two DOM elements

7 Answers7