Обменивайтесь идентификаторами Div одновременно используя jQuery

Question

У меня два дива

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

При нажатии кнопки идентификаторы div должны быть заменены.

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

было бы очевидно ложным, кто-нибудь может мне помочь в этом?

Answer 1

Примерно так должно работать:

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

Демо: http://jsfiddle.net/ambiguous/9zNq6/

Если вы действительно параноик, тогда:

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

Демо: http://jsfiddle.net/ambiguous/uQnpY/

Answer 2

Сначала кэшируйте селектор, чтобы он содержал ссылку на элемент, а затем поменяйте местами атрибуты id.

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

jsFiddle .

Answer 3

Я не думаю, что вы должны так возиться с идентификаторами; если это вопрос позиционирования, использование переменной класса имеет больше смысла. Вы уверены, что не можете использовать addclass / removeclass для своих целей?

Из любопытства, будет ли достаточно переключения между ними?

Если бы вы хотели переключить контент, это было бы довольно просто:

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

Если вы действительно заинтересованы в фактическом переключении идентификаторов, есть пример с переключением идентификаторов здесь; Изменение идентификатора элемента с помощью jQuery