jQuery Tutorial Tutorials - jQuery :lt() selector

The :lt() selector selects all elements which has an index number less than parameter index. The index numbers are zero-based. If the index is a negative number,it count backwards from the last element.

$(':lt(index)')

In below example,We will find all the elements in the set with an index of less than 4.Then place borders around them.

<ul>
    <li>list item1 index0</li>
    <li>list item2 index1</li>
    <li>list item3 index2</li>
    <li>list item4 index3</li>
    <li>list item5 index4</li>
    <li>list item6 index5</li>
</ul>
<script>
    $('li:lt(4)').css('border','2px solid red'); // item1,item2,item3,item4
</script>

Try now

Please note that when you use gt and lt at the same time, the order is important:

• gt(3):lt(2) First,find all elements with an index greater than 3,
  in the returned set [item5,item6](the index are 0,1), find all elements with an index less than 2. so the result is[<li>list item5 index4</li>,<li>list item6 index5</li>]

• lt(2):gt(3) First,find all elements with an index less than 2,
  In the returned set[item1,item2]. There are no indexes greater than 3,so the result is[].

<ul>
    <li>list item1 index0</li>
    <li>list item2 index1</li>
    <li>list item3 index2</li>
    <li>list item4 index3</li>
    <li>list item5 index4</li>
    <li>list item6 index5</li>
</ul>
<script>
    $('li:gt(3):lt(2)').css('border','2px solid red'); // item5,item6 
    $('li:lt(2):gt(3)').css('border','2px solid blue'); // empty
</script>