SELECTORS - :lt(number) Selector

The ':lt(number) Selector' is used to all the elements that are greater than the specified number.

Let us simplify with the below example.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	<p class = "para1"> First Paragraph </p>
    	<p class = "para2"> Second Paragraph </p>
    	<p class = "para3"> Third Paragraph </p>
    	
    	<button> Click me </button>

      	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
	  
      	<script>
      
			$('button').click( function() { 
            	$('p:lt(1)').text("The contents of first p element got replaced")
            });
            
      	</script>      
  	</body>
</html>

Output :

So, if you see the above code. We can see that there are three  elements,

<p class = "para1"> First Paragraph </p>
<p class = "para2"> Second Paragraph </p>
<p class = "para3"> Third Paragraph </p>

Now, just remember the count of elements starts from '0'. So, we we mark the above  elements with '0', '1' and '2'.

0

 First Paragraph

1

 Second Paragraph

2

 Third Paragraph

Now, since we want to change the contents of the  elements that are less than 1. And if you see the above index representation, there is only one  element that is less than '1'.

0

 First Paragraph

And with the '$('p:lt(1)')' selector.

$('button').click( function() {
	$('p:lt(1)').text("The contents of first p element got replaced")
});

The contents of,

0

 First Paragraph

Gets changed.

❮❮ PREV NEXT ❯❯