javascript - Jquery setInterval 和 clearInterval

Question

我想一个一个地高亮列表项，一旦到达最后一个列表项，高亮应该被移除

setInterval 有效，但是当我使用 clearInterval 删除 Interval 时它不起作用

<ul>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
</ul>


var $anchors = $('a.anchor'), counter = 0;
var interval;
interval = setInterval(function(){
 $anchors.removeClass('highlight');
  $anchors.eq(counter++ % $anchors.length).addClass('highlight');
    if($anchors.length==5){
    clearInterval(interval);
}
}, 4000);

无论如何要在到达最终列表项时清除间隔？

fiddle 链接:DEMO

更新:对不起，我的代码错了，更正了代码，还是一样的问题

Answer 1

如果你想突出显示最后一个:

 var $anchors = $('a.anchor'), counter = 0;
    var interval;
    interval = setInterval(function(){
      $anchors.removeClass('highlight');
      $anchors.eq(counter++ % $anchors.length).addClass('highlight');
    	if($anchors.length == counter){
    		clearInterval(interval);
      }
    }, 1000);

.highlight{
    color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
</ul>

---

如果你不习惯突出显示最后一个

var $anchors = $('a.anchor'), counter = 0;
var interval;
interval =setInterval(function(){
  $anchors.removeClass('highlight');
  if($anchors.length==counter){
	  clearInterval(interval);
      return;
   }
  $anchors.eq(counter++ % $anchors.length).addClass('highlight');
   
}, 1000);

.highlight{
    color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
</ul>