SELECTORS - :gt(number) Selector

The ':gt(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://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
      
			$('button').click( function() { 
            	$('p:gt(1)').text("The contents of third 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 greater than 1. And if you see the above index representation, there is only one  element that is greater than '1'.

2

 Third Paragraph

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

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

The contents of,

2

 Third Paragraph

Gets changed.

❮❮ PREV NEXT ❯❯