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

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>