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

【问题标题】：how can i delete div using for loop with delay 5 seconds如何使用延迟 5 秒的 for 循环删除 div
【发布时间】：2020-02-04 07:06:56
【问题描述】：

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

【问题讨论】：

div.lenght 不起作用，编程中的拼写问题
好吧，这段代码可以很好地删除名为 class="mt1" 的 div 的第一项？
只是偶然 - .lenght 属性将是 undefined
@CertainPerformance 好的，我会小心的。

标签： javascript jquery html loops for-loop

【解决方案1】：

一种选择是有一个递归函数，它使元素的索引淡出，如果它存在则淡出它，并使用下一个i 再次调用它自己。使用div.eq(i) 选择ith 孩子：

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>

【讨论】：

嘿，谢谢。我还在学习 js.. 这个例子对我来说有点复杂。干杯。
所以，还有一个关于时间的问题。它删除第一个项目的速度如此之快。我们需要在 .remove() 之前进行第二次 settimeout 吗？
问题是浏览器引擎正忙于加载页面，当页面加载时，第一个元素被删除，所以很难看到。如果此删除发生在页面加载以外的任何时间其他，则不会有问题。如果它确实需要在页面加载时发生，那么我想您可以将初始的fadeOutNext 放在setTimeout 中，例如setTimeout(fadeOutNext, 1000)，以便在页面加载后 1000 毫秒发生第一次淡出
好吧，我刚试过 setTimeout(function() { your code }, 2000);它奏效了。再次感谢。

【解决方案2】：

你可以试试这个：

let child = 0;

setInterval(()=>{

const c = $('.mt1:nth-child('+child+')');
c.fadeOut("fast", function(){ c.remove(); } );

child++;

},5000);

【讨论】：

嘿，我也试过这个。它删除了第一个和第三个。答案已被标记，但如果你修正了答案，那将是一个不同的答案。

【解决方案3】：

听起来像是 setInterval 的工作：

var interval = setInterval(function(){
    var div = $('.mt1').first()
    div[0] ? div.fadeOut("fast", function(){ div.remove() } ) : clearInterval(interval)
}, 5000)

【讨论】：