Looping through unordered list with jquery prev next buttons
<p>I have an unordered list with two links, a previous and next button. My goal is: when the previous button is clicked, the previous list item will change colors to red. When the next item is clicked, the next list item will change colors. When the last list item is reach and and next is clicked, it will loop back to the first one (and vice versa for previous link).</p>

<p>So far, I have this working at 95% using the jquery/html below:</p>

<pre><code>&lt;div id="lessonThree"&gt;
&lt;a class="prev" href="#"&gt;Prev&lt;/a&gt;
&lt;a class="next" href="#"&gt;Next&lt;/a&gt;

    &lt;ul&gt;
        &lt;li&gt;Ferrari&lt;/li&gt;
        &lt;li&gt;Lamborghini&lt;/li&gt;
        &lt;li&gt;Aston Martin&lt;/li&gt;
        &lt;li&gt;Fiat&lt;/li&gt;
        &lt;li&gt;Saab&lt;/li&gt;
        &lt;li&gt;Harley Davidson&lt;/li&gt;
        &lt;li&gt;Triumph&lt;/li&gt;
        &lt;li&gt;Zonda&lt;/li&gt;
        &lt;li&gt;Bugatti&lt;/li&gt;
        &lt;li&gt;Suzuki&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/div&gt;
</code></pre>

<p>START JQUERY</p>

<pre><code>    var myCar = $("#lessonThree li").length;
    var liNum = 0;

        $("a.next").click(function(){
            $("#lessonThree li").css("color","black");

            if(myCar &gt; liNum){
                $("#lessonThree li").eq(liNum).css('color', 'red');
                liNum ++;
            } 
            else {
                liNum = 0;
                $("#lessonThree li").eq(liNum).css('color', 'red');
            }
            return false;
        });

        $("a.prev").click(function(){
            $("#lessonThree li").css("color","black");

            if(liNum &gt; 0){
                liNum --;
                $("#lessonThree li").eq(liNum).css('color', 'red');
            } 
            else {
                liNum = 9;
                $("#lessonThree li").eq(liNum).css('color', 'red');
            }
            return false;
        });
</code></pre>

<p>The problem is when you press 'next' a few times and then press 'previous', you need to press 'previous' twice to get it to work. Basically, when switching from previous to next, (or next to previous) you need to click the button twice in order to see jquery progress to the next or previous  list item. Any ideas how I can fix my jquery to make this work on the first click? </p>
