jQuery :lt() selector

The :lt() selector selects the elements that have lesser index value than the value specified in the index parameter of the :lt() selector. The index starts at 0.

We can use the :gt() selector to select the elements having a larger index value than the specified index.

Syntax

The index in the above syntax is the required parameter. The parameter specifies which element is to be selected. The elements that have a lower index value than the specified value will get selected.

Let's see an illustration to understand the working of the :lt() selector.

Example

In this example, we are applying the :lt() selector on the table elements. Here, we are specifying the index value 4, so the selector will return the elements having index values lower than 4.

<!DOCTYPE html>
<html>
<head>
<title> jQuery :lt() selector </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head>
<body>
<h2> It is an example of using the :lt() selector. </h2>
<table style = "width:80%" border = "4">
<tr>
<td> 0 </td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
<td> 4 </td>
</tr>
<tr>
<td> 5 </td>
<td> 6 </td>
<td> 7 </td>
<td> 8 </td>
<td> 9 </td>
</tr>
<tr>
<td> 10 </td>
<td> 11 </td>
<td> 12 </td>
</tr>
</table>
<p> Click the following button to see the effect. </p>
<button> Click me </button>
<script>
$(document).ready(function() {
$("button").click(function(){
$("td:lt(4)").css("backgroundColor", "yellow");
});
});
</script>

</body>

</html>

Test it Now

Output

After the execution of the above code, the output will be -