Цикла перекручивание элементов массива в JQuery

Question

В моей странице у меня есть ряд дивы, содержащейся в упаковке:

<div id="superiordiv"> 
    <div class="child">div1</div> 
    <div class="child">div2</div> 
    <div class="child">div3</div> 
    <div class="child">div4</div> 
    <div class="child">div5</div> 
    <div class="child">div6</div> 
    <div class="child">div7</div> 
    <div class="child">div8</div> 
    <div class="child">div9</div> 
    <div class="child">div10</div> 
    <div class="child">div11</div> 
    <div class="child">div12</div> 
    <div class="child">div13</div> 
    <div class="child">div14</div> 
    <div class="child">div15</div> 
    <div class="child">div16</div> 
    <div class="child">div17</div> 
    <div class="child">div18</div> 
    <div class="child">div19</div> 
    <div class="child">div20</div> 
    <div class="child">div21</div> 
    <div class="child">div22</div> 
    <div class="child">div23</div> 
    <div class="child">div24</div> 
</div> 

с JQuery Я хочу, чтобы цикл их и сделать некоторые действия с элементами в отдельности.

С помощью этого метода я собираю все эти элементы в массиве, а затем циклически их показываю 3 раза.

var $elements = $("#superiordiv").find('.child'); 
var elements = Array.prototype.slice.apply($elements); 


$elements.hide(); 
var t = setInterval(function() { 

    $elements.hide(); 
    var current = elements.slice(0,3); 
    $(current).show(); 

    elements.push(elements.shift()); 

}, 1000); 

когда дойду до конца элементов

div22, div23, div24

Я хочу, чтобы начать и получить этот результат Дива

div23, div24 , div1 | div24, div1, div2

Естественно <div class="child">div1</div> приходит первым, чем дивы <div class="child">div23</div> and <div class="child">div24</div>

Так что результат я получаю это:

div1, div23, div24 | div1, div2, div24

Как я могу получить предыдущий результат? Есть ли какой-то трюк, который я могу применить к моему коду?

я оставить Codepen of the source

var $elements = $("#superiordiv").find('.child'); 
 
var elements = Array.prototype.slice.apply($elements); 
 

 

 
$elements.hide(); 
 
var t = setInterval(function() { 
 

 
    $elements.hide(); 
 
    var current = elements.slice(0, 3); 
 
    $(current).show(); 
 

 
    elements.push(elements.shift()); 
 

 
}, 1000);

.child { 
 
    display: inline-block; 
 
    font-size: 20px; 
 
    padding-left: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="superiordiv"> 
 
    <div class="child">div1</div> 
 
    <div class="child">div2</div> 
 
    <div class="child">div3</div> 
 
    <div class="child">div4</div> 
 
    <div class="child">div5</div> 
 
    <div class="child">div6</div> 
 
    <div class="child">div7</div> 
 
    <div class="child">div8</div> 
 
    <div class="child">div9</div> 
 
    <div class="child">div10</div> 
 
    <div class="child">div11</div> 
 
    <div class="child">div12</div> 
 
    <div class="child">div13</div> 
 
    <div class="child">div14</div> 
 
    <div class="child">div15</div> 
 
    <div class="child">div16</div> 
 
    <div class="child">div17</div> 
 
    <div class="child">div18</div> 
 
    <div class="child">div19</div> 
 
    <div class="child">div20</div> 
 
    <div class="child">div21</div> 
 
    <div class="child">div22</div> 
 
    <div class="child">div23</div> 
 
    <div class="child">div24</div> 
 
</div>

Answer 1

Это потому, что вы скрываете и показывать элемент, поскольку div1 написана до div24 так div1 это появится первый.

Попробуйте использовать append и remove

var $elements = $("#superiordiv").find('.child'); 
 
var elements = Array.prototype.slice.apply($elements); 
 
$elements.remove(); 
 
var t = setInterval(function() { 
 

 
    $elements.remove(); 
 
    var current = elements.slice(0, 3); 
 
    console.log(current); 
 
    $('#superiordiv').append(current); 
 

 
    elements.push(elements.shift()); 
 

 
}, 1000);

.child { 
 
    display: inline-block; 
 
    font-size: 20px; 
 
    padding-left: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="superiordiv"> 
 
    <div class="child">div1</div> 
 
    <div class="child">div2</div> 
 
    <div class="child">div3</div> 
 
    <div class="child">div4</div> 
 
    <div class="child">div5</div> 
 
    <div class="child">div6</div> 
 
    <div class="child">div7</div> 
 
    <div class="child">div8</div> 
 
    <div class="child">div9</div> 
 
    <div class="child">div10</div> 
 
    <div class="child">div11</div> 
 
    <div class="child">div12</div> 
 
    <div class="child">div13</div> 
 
    <div class="child">div14</div> 
 
    <div class="child">div15</div> 
 
    <div class="child">div16</div> 
 
    <div class="child">div17</div> 
 
    <div class="child">div18</div> 
 
    <div class="child">div19</div> 
 
    <div class="child">div20</div> 
 
    <div class="child">div21</div> 
 
    <div class="child">div22</div> 
 
    <div class="child">div23</div> 
 
    <div class="child">div24</div> 
 
</div>