I'm trying to implement a basic jQuery infinite carousel. As much for the learning process as for anything else (as a rule I'm not a fan of re-inventing wheels, but...I have to learn somehow, might as well start with the basics).

I've managed to get the list to animate left happily enough, but I'm stuck when it comes to selecting the first element of the list. I've tried to use:

$('ul#services > li:first');
$('ul#services > li:first-child');
$('ul#services > li').eq([0]);

(xhtml below),

In each case a console.log(first) (the var name used) returns all of the list-items. Am I doing something blatantly, and obviously, wrong?

The eventual plan is to clone the first li, append it to the parent ul, remove the li from the list and allow the list to scroll infinitely. It's just a list of services rather than links so I'm not -at the moment- planning to have scroll or left/right functionality.

Current xhtml:

<div class="wrapper">

    <ul id="services"> <!-- closing the `</li>` tags on the following line is to remove whitespace in the horizontal list, doesn't seem to make a difference to the jQuery from my own testing. -->
        <li>one</li
        ><li>two</li
        ><li>three</li
        ><li>four</li
        ><li>five</li
        ><li>six</li
        ><li>seven</li
        ><li>eight</li
        ><li>nine</li
        ><li>ten</li>
    </ul>

</div>