Looping through unordered list with jquery prev next buttons

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

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

<div id="lessonThree">
<a class="prev" href="#">Prev</a>
<a class="next" href="#">Next</a>

    <ul>
        <li>Ferrari</li>
        <li>Lamborghini</li>
        <li>Aston Martin</li>
        <li>Fiat</li>
        <li>Saab</li>
        <li>Harley Davidson</li>
        <li>Triumph</li>
        <li>Zonda</li>
        <li>Bugatti</li>
        <li>Suzuki</li>
    </ul>
    </div>

START JQUERY

    var myCar = $("#lessonThree li").length;
    var liNum = 0;

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

            if(myCar > 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 > 0){
                liNum --;
                $("#lessonThree li").eq(liNum).css('color', 'red');
            } 
            else {
                liNum = 9;
                $("#lessonThree li").eq(liNum).css('color', 'red');
            }
            return false;
        });

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?

You could do this with class selectors. This negates the need for storing global variables.

    $("a.next").click(function(){
        var $toHighlight = $('.active').next().length > 0 ? $('.active').next() : $('#lessonThree li').first();
        $('.active').removeClass('active');
        $toHighlight.addClass('active');
    });

    $("a.prev").click(function(){
        var $toHighlight = $('.active').prev().length > 0 ? $('.active').prev() : $('#lessonThree li').last();
        $('.active').removeClass('active');
        $toHighlight.addClass('active');
    });

http://jsfiddle.net/S79qp/

how about this:

HTML: add a current class to the current list item to be highlighted

<ul id="myList">
    <li class="current">Ferrari</li>
    ....

CSS

.current { color: red }

And JS

$('a.next').click(function () {
   var cur = $('#myList li.current');
     next = cur.next('li');
   if (next.length === 0) {  // wrap if necessary
       next = $('#myList li:first');
   } 
   cur.removeClass('current');  // move the current class
   next.addClass('current');
});

$('a.prev').click(function () {
  var cur = $('#myList li.current');
     next = cur.prev('li');
   if (next.length === 0) {
       next = $('#myList li:last');
   }      
   cur.removeClass('current');
   next.addClass('current');    
});