使用 jQuery 同时交换 Div id答案

【问题标题】：Interchange Div id's simultaneously using jQuery使用 jQuery 同时交换 Div id
【发布时间】：2011-11-02 02:02:33
【问题描述】：

我有两个 div

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

点击按钮后，div 的 id 需要互换。

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

显然是假的，有人可以帮我解决这个问题吗？

【问题讨论】：

标签： jquery jquery-ui jquery-selectors

【解决方案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/

【讨论】：

【解决方案2】：

首先缓存选择器，使其包含对元素的引用，然后交换id 属性。

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

jsFiddle.

【讨论】：

感谢您告诉我如何缓存选择器。效果很好。

【解决方案3】：

我认为您不应该以这种方式处理 ID；如果是定位问题，使用类变量更有意义。您确定不能将 addclass/removeclass 用于您的目的吗？

出于好奇，切换两者的内容就够了吗？

如果你想切换内容，那很简单：

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

如果您真的对实际切换 ID 感兴趣，这里有一个切换 ID 的示例； Changing an element's ID with jQuery

【讨论】：

感谢您的回答，我是 jQuery 新手，您为我提供了解决方案的替代方案。
切换innerHTML 并不理想。
谢谢亚历克斯，没有意识到这一点。