使用 Jquery 交换 div ID

Question

I'm trying to swap the ID's using the following interval.

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

This does work, but only one time. The interval does run, but it seems Jquery looks at the original ID's as stated when loading the page. Is there a way for Jquery to look at the ACTUAL live id's?

So, why do this? Let me clarify that! :) viewActual is "on top" of viewNext. The interval swaps there places (and several other css stuff). While viewActual is on top i load the next file into viewNext so it is loaded when swapped after 2 seconds (or any other time).

Full Code:

$('#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);

The loading isn't functioning now. I know. But i do know that the interval doesnt work because i can see that in the mozilla firefox. No reason in developing the load function as long as this doesnt work.

Answer 1

Use a data-* attribute to store any desired String to swap

 $('#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>