li:lt(4) is not getting all list items less than the count of 4?

Question

This is my HTML:

<ol id="front-page">
<li>
    <img src="images/defaultImage.gif" alt="Default Image" />
    <a href="#" title="Title Entry">Title Entry</a>    </li>
<li>
    <img src="images/defaultImage.gif" alt="Default Image" />
    <a href="#" title="Title Entry">Title Entry</a>
</li>
<li>
    <img src="images/defaultImage.gif" alt="Default Image" />
    <a href="#" title="Title Entry">Title Entry</a>
</li>
<li>
    <img src="images/defaultImage.gif" alt="Default Image" />
    <a href="#" title="Title Entry">Title Entry</a>
</li>
<li>
    <img src="images/defaultImage.gif" alt="Default Image" />
    <a href="#" title="Title Entry">Title Entry</a>
</li>
<li>
    <img src="images/defaultImage.gif" alt="Default Image" />
    <a href="#" title="Title Entry">Title Entry</a>
</li>
<li>
    <img src="images/defaultImage.gif" alt="Default Image" />
    <a href="#" title="Title Entry">Title Entry</a>
</li>
<li>
    <img src="images/defaultImage.gif" alt="Default Image" />
    <a href="#" title="Title Entry">Title Entry</a>
</li>

and my jQuery:

$(document).ready(function() {
$('ol#front-page').find('li:eq(4)').css("margin","0");
$('ol#front-page').find('li:lt(4)').append("<span>New</span>");

});

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?

Thanks for the help!

Answer 1

Your code appends the span after each one of the first 4 li elements. Is that what you are trying to do?

Answer 2

Check here (http://jsbin.com/upute) for a demonstration what your code actually does.

This sets margin to 0 on the fifth li (as the list is zero based)

$('ol#front-page').find('li:eq(4)').css("margin","0");

This appends (==at the end) the span for the first four li's

$('ol#front-page').find('li:lt(4)').append("<span>New</span>");

What you probably want to do is this. Set margin to 0 on the fourth element and prepend the span to the first four li's.

$('ol#front-page').find('li:lt(4)').prepend("<span>New</span>");

Answer 3

Replace 'li:lt(4)' with 'li:lt(3)'. The :lt() filter works on a zero-based index, so :lt(4) means elements 0, 1, 2 and 3.

Reference: Selectors/lt @ jQuery API

P.D. You probably want 'li:eq(3)' as well