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.
Advertisement
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>