相对于世界时钟，每隔15分钟将每个div的位置按顺时针方向更换1步

Question

我想每隔15分钟后，每隔1步对世界时钟进行定位，如：

第1组>第2组、第2组>第3组、第9组>第1组

null

$(function () {
    var parent = $("#chnage-position");
    var divs = parent.children();
    while (divs.length) {
        parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
    }
});

#chnage-position > div {
    float: left;
    line-height: 30px;
    width: 30%;
    text-align: center;
    background-color: steelblue;
    color: #fff;
    border-radius: 4px;
    margin: 3px;
}
#chnage-position {
    max-width: 360px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="chnage-position">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

null

为什么是世界时钟？如果手动刷新页面内容，我不希望div位置重置。

我在StackOverflow上查找了许多javaScript和jQuery代码，但都不适合我。

Answer 1

您只需每次prepend()最后一个。

两秒间隔中示例：

null

var parent = $("#chnage-position");
setInterval(() => parent.prepend(parent.children().last()), 2000)

#chnage-position>div {
  float: left;
  line-height: 30px;
  width: 30%;
  text-align: center;
  background-color: steelblue;
  color: #fff;
  border-radius: 4px;
  margin: 3px;
}

#chnage-position {
  max-width: 360px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="chnage-position">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>