html – JQuery swap elements


How can you swap blocks? So that every 10 seconds the last block would fall into the place of the first, the second into the place of the third, the third into the place of the last. And so in a circle.

<div data-id='0'>0</div>
<div data-id='1'>1</div>
<div data-id='2'>2</div>
<div data-id='3'>3</div>


When you move a block, you do not need to delete it from the old place; when you insert it into a new one, it will be deleted from the old one automatically. Made without jQuery in pure JS.

var parent = document.getElementById('container');
setInterval(function() {
  var div = parent.querySelector('div');
  parent.appendChild(div); //автоматически удалится из старого места
}, 1000);
#container div 
  float: left;
  width: 100px;
  height: 100px;
  margin: 20px;
  border: 2px solid silver;
  border-radius: 5px;
<div id="container">
  <div data-id='0'>0</div>
  <div data-id='1'>1</div>
  <div data-id='2'>2</div>
  <div data-id='3'>3</div>
Scroll to Top