Home >Web Front-end >Front-end Q&A >How to use gt and lt selectors in jquery
How to use gt and lt selectors in jquery
- WBOYOriginal
- 2022-06-01 18:36:103329browse
The gt and lt selectors in jquery: 1. The ":gt" selector is used to select elements with an index value higher than the specified value. The syntax is "$(":gt(index value)")"; 2. The ":lt" selector is used to select elements whose index value is less than the specified value. The syntax is "$(":lt(index)")".
The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.
gt and lt selectors in jquery
:gt selector
:gt selector selects elements whose index value is higher than the specified number.
index values start from 0.
is often used with other elements/selectors to select elements after a specific number in a specified group (such as the example above).
Syntax
$(":gt(index)")index required. Specifies the elements to be selected.
Will select elements whose index value is greater than the specified number.
:lt() Selector
:lt() Selector selects elements whose index value is less than the specified number.
index values start from 0.
The most common usage: used with other selectors to select elements before a specific sequence number in the specified combination (such as the example above).
The syntax is:
$(":lt(index)")The example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("tr:lt(4)").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>欢迎来到我的主页</h1>
<table border="1">
<tr>
<th>序号</th>
<th>站点名</th>
<th>网址</th>
</tr>
<tr>
<td>1</td>
<td>Google</td>
<td>google.com</td>
</tr>
<tr>
<td>2</td>
<td>Runoob</td>
<td>runoob.com</td>
</tr>
<tr>
<td>3</td>
<td>Taobao</td>
<td>taobao.com</td>
</tr>
<tr>
<td>4</td>
<td>Baidu</td>
<td>baidu.com</td>
</tr>
<tr>
<td>5</td>
<td>Sina</td>
<td>sina.com.cn</td>
</tr>
<tr>
<td>6</td>
<td>Facebook</td>
<td>facebook.com</td>
</tr>
<tr>
<td>7</td>
<td>twitter</td>
<td>twitter.com</td>
</tr>
<tr>
<td>8</td>
<td>youtube</td>
<td>youtube.com</td>
</tr>
</table>
</body>
</html>Output result:
Related video tutorials Recommended: jQuery video tutorial
The above is the detailed content of How to use gt and lt selectors in jquery. For more information, please follow other related articles on the PHP Chinese website!