title: li:lt(4) is not getting all list items less than the count of 4?
body: <p>This is my HTML:</p>
  
  <pre><code>&lt;ol id="front-page"&gt;
  &lt;li&gt;
      &lt;img src="images/defaultImage.gif" alt="Default Image" /&gt;
      &lt;a href="#" title="Title Entry"&gt;Title Entry&lt;/a&gt;    &lt;/li&gt;
  &lt;li&gt;
      &lt;img src="images/defaultImage.gif" alt="Default Image" /&gt;
      &lt;a href="#" title="Title Entry"&gt;Title Entry&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;img src="images/defaultImage.gif" alt="Default Image" /&gt;
      &lt;a href="#" title="Title Entry"&gt;Title Entry&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;img src="images/defaultImage.gif" alt="Default Image" /&gt;
      &lt;a href="#" title="Title Entry"&gt;Title Entry&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;img src="images/defaultImage.gif" alt="Default Image" /&gt;
      &lt;a href="#" title="Title Entry"&gt;Title Entry&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;img src="images/defaultImage.gif" alt="Default Image" /&gt;
      &lt;a href="#" title="Title Entry"&gt;Title Entry&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;img src="images/defaultImage.gif" alt="Default Image" /&gt;
      &lt;a href="#" title="Title Entry"&gt;Title Entry&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;img src="images/defaultImage.gif" alt="Default Image" /&gt;
      &lt;a href="#" title="Title Entry"&gt;Title Entry&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p>and my jQuery:</p>
  
  <pre><code>$(document).ready(function() {
  $('ol#front-page').find('li:eq(4)').css("margin","0");
  $('ol#front-page').find('li:lt(4)').append("&lt;span&gt;New&lt;/span&gt;");
  </code></pre>
  
  <p>});</p>
  
  <p>and what I am trying to do is have the first 3 list items to have a span appended to them. It will append the span to the 0 element but not the other 3? </p>
  
  <p>Thanks for the help! </p>