I’m going to try to circulate the div once every three days using the order of the css. What should I do?

I am try to set the order of several elements via jQuery.

The base date is the date hard-coded.

The code I have is as follows.

$temp1 = "1";
$temp2 = "2";
$temp3 = "3";
$temp4 = "4";
$temp5 = "5";

$(document).ready(function () {
    $("#flex").css("display", "flex");
    $("#flex").css("flex-direction", "column");
    $("#a").css("order", $temp1);
    $("#b").css("order", $temp2);
    $("#c").css("order", $temp3);
    $("#d").css("order", $temp4);
    $("#e").css("order", $temp5);
});

First a-b-c-d-e.
After three days b-c-d-e-a.
Six days later, c-d-e-a-b.
Nine days later, d-e-a-b-c.
Twelve days later, e-a-b-c-d.
I want to be a-b-c-d-e again in 15 days.

Additional temps may be added.

If there’s one more, First a-b-c-d-e-f.
After three days b-c-d-e-f-a.
Six days later, c-d-e-f-a-b.
Nine days later, d-e-f-a-b-c.
Twelve days later, e-f-a-b-c-d.
Fifteen days later, a-b-c-d-e-f.
I want to be a-b-c-d-e-f again in 21 days.

Answer

Can you explain it in more detail?

• pick your start date

var fromDate = new Date(2021, 07, 01) // 07 for Aug

• calculate how many days it’s been since that date Using this answer

• how many times to rotate, is ([days since start] / [number of days]) % [how many items]

var pos = Math.floor((dayIndex / dayChange) % items.length)

• “rotate” them by simply moving the first to the last that number of times

$("#wrapper > div:first").appendTo("#wrapper");

in a loop below, for simplicity, but you could also use .slice and move them all in a single operation if there’s 100s

Example code snippet, change the start date in the code to see the effect

var dayChange = 3 // change every 3 days
var fromDate = new Date(2021, 07, 01) // 07 for Aug
console.log(fromDate)

var today = new Date();
var diff = (today - fromDate) + ((fromDate.getTimezoneOffset() - today.getTimezoneOffset()) * 60 * 1000);
var oneDay = 1000 * 60 * 60 * 24;
var dayIndex = Math.floor(diff / oneDay);
console.log('Day Index: ', dayIndex);

var items = $("#wrapper>div");

var pos = Math.floor((dayIndex / dayChange) % items.length)
console.log(dayIndex, dayChange, items.length, pos)

while (pos > 0) {
  $("#wrapper > div:first").appendTo("#wrapper");
  pos--;
}

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

  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div>e</div>

</div>