Question

假设我有这个页面结构

<div id="line-value-container-1-1">
     <button type="button" id="up_value_1_1">
        <span class="icon-chevron-up"></span>
     </button>
     <button type="button" id="down_value_1_1">
        <span class="icon-chevron-down"></span>
     </button>
</div>
<div id="line-value-container-1-2">
     <button type="button" id="up_value_1_2">
        <span class="icon-chevron-up"></span>
     </button>
     <button type="button" id="down_value_1_2">
        <span class="icon-chevron-down"></span>
     </button>
</div>
<div id="line-value-container-1-3">
     <button type="button" id="up_value_1_3">
        <span class="icon-chevron-up"></span>
     </button>
     <button type="button" id="down_value_1_3">
        <span class="icon-chevron-down"></span>
     </button>
</div>

当我点击例如当id =“up_value_1_3”的按钮被点击时，我想将其父div移动到on元素上，使它保持在div之前，id =“line-value-container-1-2”像这样：

<div id="line-value-container-1-1">
     <button type="button" id="up_value_1_1">
        <span class="icon-chevron-up"></span>
     </button>
     <button type="button" id="down_value_1_1">
        <span class="icon-chevron-down"></span>
     </button>
</div>
<div id="line-value-container-1-3">
     <button type="button" id="up_value_1_3">
        <span class="icon-chevron-up"></span>
     </button>
     <button type="button" id="down_value_1_3">
        <span class="icon-chevron-down"></span>
     </button>
</div>
<div id="line-value-container-1-2">
     <button type="button" id="up_value_1_2">
        <span class="icon-chevron-up"></span>
     </button>
     <button type="button" id="down_value_1_2">
        <span class="icon-chevron-down"></span>
     </button>
</div>

使用JQuery insertBefore（）函数可以轻松解决此问题。

现在想象一下，我想在这两个移动的div之间交换id，例如我说：

$("#line-value-container-1-2".attr('id', "#line-value-container-1-3");
$("#line-value-container-1-3".attr('id', "#line-value-container-1-2");

这个简单的交换不起作用，因为在第一个id更改之后，文档因为无效的HTML，因为有两个具有相同id的元素，而第二个语句将只选择具有该id的第一个元素，即之前更改的id。

结论所有更改都不会发生任何变化。我该如何解决这个问题？

Answer 1

您可以使用自定义data-*属性，例如

$("#line-value-container-1-2").attr('data-id', "line-value-container-1-3");
$("#line-value-container-1-3").attr('data-id', "line-value-container-1-2");

$("#line-value-container-1-2,#line-value-container-1-3").each(function(){
    $(this).attr('id', $(this).attr('data-id'));
});

Answer 2

您可以在进行更改时临时将第一个引用存储在变量中，如下所示：

var temp = $('#line-value-container-1-2');

$('#line-value-container-1-3').attr('id', 'line-value-container-1-2');
temp.attr('id', 'line-value-container-1-3');

如何在2个html元素之间交换两个id？

2 个答案: