Question

在我的页面中，我在包装器中包含了一系列div：

 <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我想循环它们并分别对元素进行一些操作。

使用这种方法，我将所有这些元素收集在一个数组中，然后循环显示它们。

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

我想重新开始并获得此结果div

div23，div24，div1 | div24，DIV1，DIV2

自然<div class="child">div1</div>优先于div <div class="child">div23</div> and <div class="child">div24</div>

所以我得到的结果是：

div1，div23，div24 | DIV1，DIV2，div24

如何获得之前的结果？是否有某种技巧可以应用于我的代码？

我发布了Codepen of the source

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

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>

在jQuery中循环循环数组元素

1 个答案: