Updated April 18, 2023
Introduction to jQuery gt()
The jQuery gt() selector function is used to select all the elements at an index greater than the specified index. The jQuery gt() function is a built-in function in jQuery. The index selector expression with greater than selector filter previous matched expression set of elements. The index starts from 0. Whereas the lt()function selects all the elements to an index value lesser than the specified index.
Syntax:
$("$:gt( index )");Parameters:
- index: This is not an optional parameter. It specifies the index value to select, the elements at an index greater than the specified index are selected.
Return Value:
The return value of this function is the index value of the specified element.
Working
- The jQuery gt() function accepts one parameter, which is the index value to select all the elements of index value greater than this.
- Suppose we have four div element in the HTML page, we need to get all the div elements of index greater than 1 (select index second and third elements), so we can use the gt() function as “$(“div:gt(1)”);”, which select third and fourth div with contents.
Examples of jQuery gt()
Given below are the examples of jQuery gt():
Example #1
Example of jQuery gt() function to get the selected elements of index value grater then specified.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery gt() function </title>
<script>
function disp()
{
$( "td:gt(2)").css({
"color" : "red",
"border": "2px solid black"
});
}
</script>
</head>
<body>
<h3> This an example of gt() function: </h3>
<h2> The List of Vegetables and Fruits are : </h2>
<table style = "width:80%" border = "4">
<tr>
<td> Vegetables </td>
<td> Corn </td>
<td> Mushroom </td>
<td> Broccoli </td>
<td> Cucumber </td>
</tr>
<tr>
<td> Fruits </td>
<td> Apple </td>
<td> Banana </td>
<td> Cherry </td>
<td> Pome </td>
</tr>
</table>
<p> Some more vegetables and fruits will be add soon. </p>
<button onclick = "disp()">Get all the next elements index greater than specified.</button>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code, there is a table element that contains tr and td elements. Next, the gt() function is used to get all the next elements whose index value are greater than 2 as “$(“td:gt(2)”);”, it selects td elements whose index value are 3, 4, 5 and all, as we can see once we click on the button.
Example #2
Example of jQuery gt() function to get the selected elements without specifying the index value.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery gt() function </title>
<script>
function disp()
{
$( "p:gt()").css({
"background-color": "yellow",
"border": "2px dashed green"
});
}
</script>
</head>
<body>
<h3> This an example of gt() function: </h3>
<div>
<p> This is a first paragraph and it is a child of div element. </p>
<span> This is a first span box and it is a child of div element. </span>
</div>
<p> This is a second paragraph and it is a sibling of div element. </p>
<span> This is a second span box and it is a sibling of div element. </span>
<br>
<button onclick = "disp()"> Get all the next elements index greater than specified. </button>
</body>
</html>Output:
Once we click on the first button, the output is:
In the above code, there are p and span elements are used. Next, the gt() function is used to get all the p elements without passing the index value. The gt() function take 0 as the default index value if it is not specified, so it selects p elements whose index value are greater than 0 as “$( “p:gt()”);”, as we can see in the output.
Example #3
Example of jQuery gt() function to get the multiple selected elements of index value grater then specified.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery gt() function </title>
</head>
<body>
<h3> The Example for array indexOf() function : </h3>
<p> First paragraph. </p>
<span> First span box. </span>
<p> Second paragraph. </p>
<span> Second span box. </span>
<p> Third paragraph. </p>
<span> Third span box. </span>
<br>
<button onclick = "Res()"> Get all the next elements index greater than specified. </button>
<script>
function Res()
{
alert("The $(\"p,span:gt()\" is : " + $("p,span:gt()").text()+"\n\nThe $(\"span,p:gt()\" is : " + $("span,p:gt()").text()+"\n\nThe $(\"p,span:gt(1)\" is : " + $("p,span:gt(1)").text()+"\nThe $(\"span,p:gt(1)\" is : " + $("span,p:gt(1)").text());
}
</script>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code, there are p and span elements are used. Next, the gt() function is used to get all the p and span elements with or without passing the index value. The gt() function takes 0 as the default index value if it is not specified. In the above output, we can see that in the list of selector elements the gt() function is working for only the last element, and for other elements, all index value elements are selecting.
Conclusion
The jQuery gt() function is a built-in function, which is used to select all the elements at an index greater than the specified index.
Recommended Articles
This is a guide to jQuery gt(). Here we discuss the introduction, working of jQuery gt() function and examples respectively. You may also have a look at the following articles to learn more –
