title: How to get jQuery to find the first list-item, rather than all list-items?
body: <p>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).</p>
  
  <p>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:</p>
  
  <pre><code>$('ul#services &gt; li:first');
  $('ul#services &gt; li:first-child');
  $('ul#services &gt; li').eq([0]);
  </code></pre>
  
  <p>(xhtml below),</p>
  
  <p>In each case a <code>console.log(first)</code> (the <code>var</code> name used) returns all of the list-items. Am I doing something blatantly, and obviously, wrong?</p>
  
  <p>The eventual plan is to clone the first <code>li</code>, append it to the parent <code>ul</code>, remove the <code>li</code> 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.</p>
  
  <p>Current xhtml:</p>
  
  <p>(<strong>edited to add the entirety of the current code/html</strong>)</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd"&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  
      &lt;title&gt;&lt;/title&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="css/stylesheet.css" /&gt;
  
      &lt;!--[if IE 8]&gt;
  
          &lt;link rel="stylesheet" type="text/css" href="css/ie8.css" /&gt;
  
      &lt;![endif]--&gt;
  
      &lt;!--[if lte IE 7]&gt;
  
          &lt;link rel="stylesheet" type="text/css" href="css/ie7.css" /&gt;
  
      &lt;![endif]--&gt;
  
      &lt;style type="text/css" media="screen"&gt;
  ul#services {overflow: visible; }
      &lt;/style&gt;
  
      &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
  
  
      &lt;script type="text/javascript"&gt;
  
          $(document).ready(
  
              function() {
  
                  $(document).ready(function() {
  
                      $('h1 &gt; span.businessName').each(
                              function() {
                                  var text = $(this).html();
                                  var first_letter = text.substr(0,1);
  
                                  if ( /[a-zA-Z]/.test(first_letter) ) {
                                      $(this).html('&lt;span class="firstLetter"&gt;' + first_letter + '&lt;/span&gt;' + text.slice(1));
                                  }
                              }
                      ); 
              });
  
                  $('ul#services &gt; li').filter(':odd').addClass('odd');
                  $('ul#services &gt; li').filter(':visible:last').addClass('last');
  
  //--&gt; Function starts
  
          jQuery.fn.carousel = function() {
              // 1. find the width of the list items:
  
                  var listWidth = $('ul#services &gt; li').outerWidth();
  
              // 2a. find the current first item:
  
                  var curFirst = $('ul#services &gt; li').first();
  
                  console.log(curFirst);
  
              // 2b. append the current first item:
  
              // 2c. remove the first item 
  
              // 3. animate the list, to move left by listWidth:
  
                  $('ul#services &gt; li').delay(500).css('position','relative').animate(
                      {
                      left: '-=' + listWidth
                      },
                      5000,
                          function() {
  
      //                      $('ul#services').get(0).remove();
                              $('ul#services').delay(500).carousel()
                          }
                  );
              };
  //--&gt; Function ends.
              $('ul#services').carousel();
  
              }
          )
  
      &lt;/script&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="pageWrap"&gt;
  
          &lt;div id="branding"&gt;
  
              &lt;h1&gt;&lt;span class="businessName"&gt;business name&lt;/span&gt; &lt;span class="tagline"&gt;some other info&lt;/span&gt;&lt;/h1&gt;
              &lt;hr id="rule"&gt;
  
          &lt;/div&gt;
  
          &lt;div id="content"&gt;
  
  &lt;div class="carousel"&gt;
  
      &lt;div class="wrapper"&gt;
  
          &lt;ul id="services"&gt;
              &lt;li&gt;one&lt;/li
              &gt;&lt;li&gt;two&lt;/li
              &gt;&lt;li&gt;three&lt;/li
              &gt;&lt;li&gt;four&lt;/li
              &gt;&lt;li&gt;five&lt;/li
              &gt;&lt;li&gt;six&lt;/li
              &gt;&lt;li&gt;seven&lt;/li
              &gt;&lt;li&gt;eight&lt;/li
              &gt;&lt;li&gt;nine&lt;/li
              &gt;&lt;li&gt;ten&lt;/li&gt;
          &lt;/ul&gt;
  
      &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div id="mainPane"&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet...&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div id="sidebar"&gt;
  
              &lt;div id="contact"&gt;
      &lt;!--
          STARTS hCARD (below)
      --&gt;
                  &lt;div id="hcard"&gt;
                      &lt;div id="hcard-yy-xx" class="vcard"&gt;
                          &lt;span class="fn"&gt;&lt;span class="given-name"&gt;YY&lt;/span&gt; &lt;span class="family-name"&gt;XX&lt;/span&gt;&lt;/span&gt;
                          &lt;div class="org"&gt;business name&lt;/div&gt;
                          &lt;a class="email" href="mailto:xx@xx.com"&gt;email&lt;/a&gt;
  
                              &lt;div class="tel"&gt;
  
                              &lt;/div&gt;
                              &lt;a class="downloadAs" href="http://suda.co.uk/projects/microformats/hcard/get-contact.php?uri=http://www.davidrhysthomas.co.uk/arch/tester.html"&gt;Download contact information&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
      &lt;!--
          ENDS hCARD (above)
      --&gt;
              &lt;/div&gt;
  
              &lt;div id="professionalBodies"&gt;
  
                  &lt;ul&gt;
                      &lt;li&gt;some stuff&lt;/li&gt;
                  &lt;/ul&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
          &lt;div class="push"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
          &lt;div id="footer"&gt;
  
  
          &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <hr />
  
  <p>Updated, in response to Nick Craver's answer:</p>
  
  <blockquote>
    <p>...I believe you want: <code>$('ul#services li:first').remove();</code>
    ...What you probably want there is something like <code>$('ul#services &gt; li:first').delay(500)...</code></p>
  </blockquote>
  
  <p>Using <code>$('ul#services li:first').remove();</code> generates the error:</p>
  
  <blockquote>
    <blockquote>
      <p>Uncaught TypeError: Object # has no method 'remove'</p>
    </blockquote>
  </blockquote>
  
  <p>and there seems to be no difference in behaviour from using <code>$('ul#services &gt; li:first').delay(500)...</code></p>