Question

我试图逐个删除列表中的项目，但似乎无法使其工作。我需要将它们单独和一个接一个地移除 - 不是所有的同时移除。我需要在每次移除之间延迟移除它们，最好是10秒。有人可以帮忙吗？

 <div class="health-bar">
   <ul>
    <li class="heart5"><img src="heart.png" alt="Smiley face"  width="60px"> </li>
    <li class="heart4"><img src="heart.png" alt="Smiley face"  width="60px"> </li>
    <li class="heart3"><img src="heart.png" alt="Smiley face"  width="60px"> </li>
    <li class="heart2"><img src="heart.png" alt="Smiley face"  width="60px"> </li>
    <li class="heart1"><img src="heart.png" alt="Smiley face"  width="60px"> </li>
   </ul>
 </div>

我得到了这么远但停止了因为我知道这不是正确的。

 $('.health-bar ul li.heart5').delay(10000).remove();
 $('.health-bar ul li.heart4').delay(20000).remove();
 $('.health-bar ul li.heart3').delay(30000).remove();
 $('.health-bar ul li.heart2').delay(40000).remove();
 $('.health-bar ul li.heart1').delay(50000).remove();

Answer 1

您可以使用setTimeout来完成此操作。因为.delay()是一个属于动画队列的函数。

var lis = $(".health-bar > ul > li");
for(var i=0; i<lis.length; i++){
 (function(i) {
  setTimeout(function(){
   lis.eq(i).remove();
  }, (i+1) * 10000);
 })(i);
}

如果您更喜欢使用ES6，那么事情会变得更加简单。

let lis = $(".health-bar > ul > li");
for(let i=0; i<lis.length; i++){
  setTimeout(function(){
   lis.eq(i).remove();
  }, (i+1) * 10000);
}

DEMO

Answer 2

你可以在没有可能更清洁的循环的情况下做到这一点。此示例的超时时间为一秒，因此请根据您的要求进行调整。

let items = $('.health-bar ul li');

setTimeout(checkItems, 1000, items, 0);

function checkItems(items, index) {
  if (index < items.length) {
    items.eq(index).remove();
    setTimeout(checkItems, 1000, items, ++index);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="health-bar">
  <ul>
    <li class="heart5"><img src="heart.png" alt="Smiley face" width="60px"> </li>
    <li class="heart4"><img src="heart.png" alt="Smiley face" width="60px"> </li>
    <li class="heart3"><img src="heart.png" alt="Smiley face" width="60px"> </li>
    <li class="heart2"><img src="heart.png" alt="Smiley face" width="60px"> </li>
    <li class="heart1"><img src="heart.png" alt="Smiley face" width="60px"> </li>
  </ul>
</div>

如何使用JQuery延迟10秒后依次删除每个列表项？

2 个答案:

DEMO