1

I want to highlight a list items one by one, once it reaches the final list item, highlight should be removed

setInterval is working, but when i use clearInterval to remove the Interval it doesn't work

<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);

anyway to clear the interval when it reaches the final list item ?

Fiddle link : DEMO

Update : Sorry i was wrong in code, corrected the code, still same issue

Improve this question
3
  • 1
    "Jquery setInterval and clearInterval" setInterval and clearInterval have nothing to do with jQuery. Commented May 9, 2016 at 7:13
  • 1
    Next time, please use Stack Snippets (the <> toolbar button) rather than jsFiddle, so everything in here on-site. Commented May 9, 2016 at 7:18
  • "Sorry i was wrong in code, corrected the code, still same issue" You should probably update the fiddle as well (or better yet, turn it into a Stack Snippet). Commented May 9, 2016 at 7:19

5 Answers 5

Reset to default
3

If You want to highlight last one : 

 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>

If you don't wont to highlight last one

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Good point to use $anchors.length rather than the hardcoded 5.
1

Try :

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

1 Comment

Last anchor still will be highlighted
1

You're using the wrong condition to stop the timer. $anchors.length will always be 5 with what you've shown; want you want to check is counter.

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

Live example:

var $anchors = $('a.anchor'), counter = 0; var interval; interval = setInterval(function() { $anchors.removeClass('highlight'); $anchors.eq(counter++ % $anchors.length).addClass('highlight'); if (counter == 5) { clearInterval(interval); } }, 400);
.highlight { color: red; }
<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> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Note: xAqweRx makes a good point in his solution that using counter == $anchors.length rather than counter == 5 is more robust; that way, when you change the number of anchors, the code keeps working.

Improve this answer

Comments

1

Here's a different simpler way to go:

function stopInt(cnt, int) { if(cnt > $anchors.length){ clearInterval(int); return false; } }

Call this function at the end of a cycle. Also, I'm not sure how that counter++ % increment modulus is? I simply put the counter++ all by itself and it looks like there's no need to extract the modulus...modulus really?

FIDDLE

SNIPPET

var $anchors = $('a.anchor'), counter = 0; var interval; setInterval(function() { interval = $anchors.removeClass('highlight'); $anchors.eq(counter).addClass('highlight'); stopInt(counter, interval); counter++; }, 4000); function stopInt(cnt, int) { if (cnt > $anchors.length) { clearInterval(int); return false; } }
.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>

Improve this answer

Comments

0

$('a.anchor') will return a array list of 5 elements so you have to check it till 4

var $anchors = $('a.anchor'), counter = 0; var interval; var o = setInterval(function(){ interval= $anchors.removeClass('highlight'); var m = counter++ % $anchors.length $anchors.eq(m).addClass('highlight'); console.log(m) if(m==4){ clearInterval(o); //$anchors.removeClass('highlight'); // Uncomment this if you want to remove the highlighted class } }, 1000);

jsfiddle

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.