I have a script that that cycles through a bunch of list-items; adding/removing to each one. As it is right now it just loops endlessly, how could I alter this script **so that it stops when it reaches the last list-item?**

**<http://jsfiddle.net/bizarroZ/YyDjW/>**

```
<style type="text/css" media="screen">
li {display:none;} .go {color:green;display:block}
</style>

<ul>
<li>First Slide</li>
<li>Second Slide</li>
<li>Third Slide</li>
<li>Fourth Slide</li>
<li>Fifth Slide</li>
<li>Sixth Slide</li>
</ul>

<a href="#" class="go-button">GO!</a>

<script type="text/javascript" charset="utf-8">

 $(".go-button").click(function() {

 $("li:nth-of-type(1)").addClass("go"); 

var index = 0;
var length = $("ul").children().length;
var delays = [
        1000,
        1500,
        2000,
        2500,
        3000,
        15000
        ];

function delayNext()
{
    setTimeout(function() {
    $("ul li:eq(" + index +  ")").addClass("go").siblings().removeClass("go");
        index++;

        if (index == length)
            index = 0;

           delayNext();
        }, delays[index]);
   }

    delayNext();
 });
</script>

```