我如何使用5秒延迟的for循环删除div

debugcn 发表于 Dev

万圣节

我想删除div组。我可以删除所有div标签的class =“ mt1”。但我想延迟5秒完成所有操作。

HTML代码：

<div class="mgroup">
   <div class="mt1">Text 1</div> // wait 5 second and delete
   <div class="mt1">Text 2</div> // wait 5 second and delete
   <div class="mt1">Text 3</div> // wait 5 second and delete
   <div class="mt1">Text 4</div> // wait 5 second and delete
   <div class="mt1">Text 5</div> // wait 5 second and delete
</div>

我的JS代码：

var div = $('.mt1');
if(div.lenght >0)
{
   var parent = div.first();
   parent.fadeOut("fast", function(){ parent.remove(); } );
}

我的代码删除了div的第一项。我希望它每5秒重复一次。有什么建议吗？

一定的表现

一种选择是具有一个递归函数，该函数将元素的索引淡出，如果存在则淡出它，然后使用next再次调用自身i。使用div.eq(i)选择i个孩子：

const fadeOutNext = (i) => {
  var div = $('.mt1');
  if (!div[i]) {
    return;
  }
  div.eq(i).fadeOut("fast", function() {
    setTimeout(fadeOutNext, 5000, i + 1);
  });
};

fadeOutNext(0);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mgroup">
  <div class="mt1">Text 1</div> // wait 5 second and delete
  <div class="mt1">Text 2</div> // wait 5 second and delete
  <div class="mt1">Text 3</div> // wait 5 second and delete
  <div class="mt1">Text 4</div> // wait 5 second and delete
  <div class="mt1">Text 5</div> // wait 5 second and delete
</div>

如果元素在淡出后不再需要在DOM中存在，则可以.remove()使代码更好：

const fadeOutNext = () => {
  var div = $('.mt1');
  if (!div.length) {
    return;
  }
  div.eq(0).fadeOut("fast", function() {
    $(this).remove();
    setTimeout(fadeOutNext, 5000);
  });
};

fadeOutNext();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mgroup">
  <div class="mt1">Text 1</div> // wait 5 second and delete
  <div class="mt1">Text 2</div> // wait 5 second and delete
  <div class="mt1">Text 3</div> // wait 5 second and delete
  <div class="mt1">Text 4</div> // wait 5 second and delete
  <div class="mt1">Text 5</div> // wait 5 second and delete
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。