Interchange Div id's simultaneously using jQuery

Question

I have two div's

    <div id="one">xyz</div>
    <div id="two">abc</div>
    <input id="reverse" type="button" value="Reverse" />

On click of the button, the the id's of the div needs to get interchanged.

    $('#one').attr('id', 'two');
    $('#two').attr('id', 'one');

would obviously be false, can anyone help me regarding this?

score 2 · Answer 1 · answered Nov 02 '11 at 02:09

Something like this should work:

$('#reverse').click(function() {
    var $one = $('#one');
    var $two = $('#two');
    $one.attr('id', 'two');
    $two.attr('id', 'one');
});

Demo: http://jsfiddle.net/ambiguous/9zNq6/

If you're really paranoid then:

$('#reverse').click(function() {
    var $one = $('#one');
    var $two = $('#two');
    $one.removeAttr('id');
    $two.attr('id', 'one');
    $one.attr('id', 'two');
});

Demo: http://jsfiddle.net/ambiguous/uQnpY/

score 1 · Accepted Answer · answered Nov 02 '11 at 02:07

1

Cache the selector first so it holds a reference to the element, then swap the id attributes.

var one = $('#one');
$('#two').attr('id', 'one');
one.attr('id', 'two');

jsFiddle.

answered Nov 02 '11 at 02:07

alex

479,566
201
878
984

Thanks for the letting me know on how to cache the selectors. It worked nicely. – Krishh Nov 02 '11 at 02:20

score 0 · Answer 3 · edited May 23 '17 at 09:59

0

I don't think you should be messing around with IDs in that fashion; if it is a matter of positioning, using a class variable makes more sense. Are you sure you can't use addclass/removeclass for your purposes?

Out of curiousity, would switching the content of the two be sufficient?

If you wanted to switch the content, it would be pretty simple:

    function switch_contents(){
            var one_contents = $('#one').html();
            $('#one').html($('two').html());
            $('#two').html(one_contents);
    }

If you are really interested in actually switching the IDs, there is an example with switching IDs over here; Changing an element's ID with jQuery

edited May 23 '17 at 09:59

Community

1
1

answered Nov 02 '11 at 02:13

jbm

116
3

Thanks for the answer, I am new to jQuery, you have provided me an alternative to the solution. – Krishh Nov 02 '11 at 02:18
Switching the `innerHTML` is rarely ideal. – alex Nov 02 '11 at 02:21

Interchange Div id's simultaneously using jQuery

3 Answers3