The jQuery :lt() selector selects the items of group element less than the specified index number. Each item of a group element start with an index 0. If you specify the index value as 3, it selects the items given at index 0,1 and 2. These are the items whose index value is less than 3.
The syntax of the selector is given below.
You can specify the tag name or class before the selector name in order to select only the required element. Check examples given below to understand the way of using it.
Parameter Description
| Sr. No. | Parameter Name | Description |
|---|---|---|
| 1 | n | It is the index value of an item to select. Those items whose index value is less then this item is selected. |
Examples of jQuery :lt Selector
The two different examples are showing below to explain the use of the jQuery :lt Selector. The first example uses the HTML table and the second example using the list element. You can click the below links to directly jump to the example.
Let’s start with the table element and select the required tr items.
jQuery :lt Selector to Select and Color Table Row Text Less Than Index 3
The rows of a table start with an index 0. The below example selects the item given at index 3. After the selection, it applies the CSS color to the elements less than index 3.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<script> $(document).ready(function(){ $('.mybtn').click(function(){ $( "table.mytablelt tr:lt(3)" ).css( "color", "green" ); }); }); </script> <style> .mytablelt{ border-collapse:collapse; } .mytablelt tr th, .mytablelt tr td{ border: 1px solid #ccc; padding:10px; } </style> <p><button type="button" class="mybtn">Click Me to Color Row</button></p> <table class="mytablelt"> <tr> <th>Sr. No.</th> <th>Footballer Name</th> <th>Country</th> </tr> <tr> <td>1</td> <td>Cristiano Ronaldo</td> <td>Portugal</td> </tr> <tr> <td>2</td> <td>Lionel Messi</td> <td>Argentina</td> </tr> <tr> <td>3</td> <td>Mohamed Salah</td> <td>Egypt</td> </tr> <tr> <td>4</td> <td>Kevin De Bruyne</td> <td>Belgium</td> </tr> </table> |
Output
| Sr. No. | Footballer Name | Country |
|---|---|---|
| 1 | Cristiano Ronaldo | Portugal |
| 2 | Lionel Messi | Argentina |
| 3 | Mohamed Salah | Egypt |
| 4 | Kevin De Bruyne | Belgium |
Click the button given in the example above. It selects row items at index 0, 1 and 2 to apply the green color to its text content.
Select and Color List Item Text Less Than Index 3
Let’s use the selector to select the items of the list element. A list element items start with an index o. When you use the jQuery :lt() selector and specify the index value as 3. It selects and applies the color to the items less than the specified index.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(document).ready(function(){ $('.mylibtnlt').click(function(){ $( "ul.mylistlt li:lt(3)" ).css( "color", "orange" ); }); }); </script> <p><button type="button" class="mylibtnlt">Click Me to Color List Item Text</button></p> <ul class="mylistlt"> <li>Select list item less than the given index.</li> <li>Apply color to the text of selected list item.</li> <li>Tutorialdeep is the best place to learn jQuery.</li> <li>Learn web development with our step-by-step tutorial guide.</li> <li>Live examples are helpful to learn everything.</li> </ul> |
Output
- Select list item less than the given index.
- Apply color to the text of selected list item.
- Tutorialdeep is the best place to learn jQuery.
- Learn web development with our step-by-step tutorial guide.
- Live examples are helpful to learn everything.
The above example contains the button and the list items. When you click the button given above, it applies the orange color to the text of list items.