javascript - 如何使用 for 循环删除 div 并延迟 5 秒

Question

我想删除 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 秒重复一次。有什么建议吗？

Answer 1

一个选择是有一个递归函数，它获取元素的索引以淡出，如果它存在则淡出，用下一个 i 再次调用它自己。使用 div.eq(i) 选择第 i 个 child :

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>