jquery - 关于在一组元素中连续添加和删除类的问题

Question

您能否告诉我如何向每个 .col-md-3 添加一个类并在 5 秒后连续删除它？

<div class="container">
<div class="row">
  <div class="col-md-3">Mapping</div>
  <div class="col-md-3">Coding</div>
  <div class="col-md-3">Network</div>
  <div class="col-md-3">Application</div>
  </div>
</div>

body{
  padding:25px;
}
.red{
    color:red
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
setInterval(function(){
   
      $(".col-md-3").each(function(){
         $(this).toggleClass('red')
    });
}, 2000)

如您所见，这将类添加到所有元素，但我需要一个一个地执行此操作

Answer 1

您可以使用以下代码片段:

setInterval(function(){
    var $next = $('.col-md-3.red + .col-md-3').length ? $('.col-md-3.red + .col-md-3') : $('.col-md-3').first(); 
    $('.col-md-3.red').add($next).toggleClass('red')
}, 2000);
$('.col-md-3').first().addClass('red'); // should be set in HTML markup instead

body{
  padding:25px;
}
.red{
    color:red
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container">
<div class="row">
  <div class="col-md-3">Mapping</div>
  <div class="col-md-3">Coding</div>
  <div class="col-md-3">Network</div>
  <div class="col-md-3">Application</div>
  </div>
</div>