Как я могу поменять два идентификатора между двумя элементами html?

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> 

Let'say когда, например, при нажатии кнопки с идентификатором = «up_value_1_3» нажата, я хочу, чтобы переместить его родительский DIV вверх ONDE элемент поэтому пребывание перед тем DIV с ID = "строка-значение-контейнера-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-х, когда я говорю, например:

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

Этот простой обмен не работает, потому что после первого идентификатора изменения документа becames недопустимого HTML, потому что есть два элемента с одинаковым идентификатором, а второй оператор просто выбирает первый элемент с этим идентификатором, который является ранее измененным идентификатором.

Заключение Все изменения не изменяются. Как я могу решить эту проблему?

Answer 1

Вы можете временно хранить первую ссылку в переменную пока вы делаете изменения, как это:

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'); 

Answer 2

Вы можете использовать пользовательские атрибуты 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')); 
});