Обмен идентификаторами div с использованием Jquery

Question

Я пытаюсь поменять ID, используя следующий интервал.

setInterval(
  function() 
  {
    $("#viewNext").attr("id","viewActual");
    $("#viewActual").attr("id","viewNext");
  }, 2000);

Это работает, но только один раз. Интервал работает, но кажется, что Jquery смотрит на исходные идентификаторы, как указано при загрузке страницы. Есть ли способ для Jquery посмотреть на фактические действующие идентификаторы?

Итак, зачем это делать? Позвольте мне уточнить это! :) viewActual находится "сверху" viewNext. Интервал меняет местами (и некоторые другие вещи css). Пока viewActual находится сверху, я загружаю следующий файл в viewNext, поэтому он загружается при замене через 2 секунды (или в любое другое время).

Полный код:

$('#viewContainer').append('<div class="viewBox" id="viewActual" style="height: '+screenWidth+'px; width: '+screenHeight+'px;"></div>');   
$('#viewContainer').append('<div class="viewBox" id="viewNext" style="height: '+screenWidth+'px; width: '+screenHeight+'px;"></div>');   

$("#viewActual").load('test/test1.php');
$("#viewNext").load('test/test2.php');

setInterval(
  function() 
  {
    $("#viewNext").attr("id","viewActual");
    $("#viewActual").attr("id","viewNext");
  }, 2000);

Загрузка не выполняется не работает сейчас. Я знаю. Но я знаю, что интервал не работает, потому что я могу видеть это в Mozilla firefox. Нет причин разрабатывать функцию загрузки, если она не работает.

Answer 1

Используйте атрибут data-* для хранения любой желаемой строки для замены

$('#viewContainer').append('<div class="viewBox" id="viewActual" data-swapid="viewNext"></div>');   
$('#viewContainer').append('<div class="viewBox" id="viewNext" data-swapid="viewActual"></div>');   

$("#viewActual").text('aaaaa');
$("#viewNext").text('bbbbb');

setInterval(() => {
  $('[data-swapid]').each((i, el) => {
    const data = el.dataset.swapid; // Cache data value
    el.dataset.swapid = el.id;      // Swap ID into data
    el.id = data;                   // Set ID from cache 
  });
}, 1000);

#viewNext {color: red;}

<div id="viewContainer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>