在处理网页元素时，我们经常需要从中精确地挑出特定范围的一部分。jQuery 提供了一对非常直观且好用的索引筛选选择器——:gt() 和 :lt()。它们不依赖元素的 ID 或类名，而是根据元素在 DOM 树兄弟节点中的排列位置（从0开始计数）来工作，这在操作表格行、列表项或任何结构化重复元素时尤其方便。
:gt() 选择器：选择索引“大于”指定值的元素
:gt() 代表“greater than”。它会筛选出所有索引值大于我们给定参数的兄弟元素。记住，索引计数总是从 0 开始，第一个元素的索引是 0，第五个就是 4。
语法
$("selector:gt(index)")
这里的 index 是一个从零开始的整数。这个选择器会返回一个 jQuery 对象，包含所有匹配基础选择器且同级索引大于该数字的元素。我个人起初常会混淆边界，以为 :gt(4) 是包括第5个之后的，实际上它从索引 5 的元素（也就是第6个）才开始选中。这个细节在编写时值得留意。
知识要点
在处理表格动态高亮或批量操作时，:gt() 比用循环判断索引更简洁，性能也更好，因为它利用了浏览器原生的选择器引擎。如果你发现自己正在用 .each() 和 if (index > n) 来过滤元素，不妨回头看看 :gt()。
:lt() 选择器：选择索引“小于”指定值的元素
与 :gt() 相对，:lt() 代表“less than”。它会选中所有索引值小于给定参数的兄弟元素。同样，索引从 0 开始。
语法
$("selector:lt(index)")
:lt() 和 :gt() 经常组合使用，以切出一个连续的中间区间。例如，要选中一个列表中除了前两个和后两个之外的所有项目，这种“掐头去尾”的操作用它们来表达会非常直接。
本文实例：直观感受 :gt() 的工作方式
光说概念难免抽象，我们看一个具体的操作。以下示例展示了一个简单的数据行，我们通过按钮事件，使用 :gt(4) 来改变特定单元格的背景色。
<!DOCTYPE html>
<html>
<head>
<title>jQuery :gt() 选择器实操</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h2>点击按钮，高亮索引大于4的表格单元格</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>点击下方按钮查看效果。</p>
<button>点击我</button>
<script>
$(document).ready(function() {
$("button").click(function() {
// 这一行的意思是：选中所有 td 元素中，同级索引大于 4 的那些，然后把它们背景变黄
$("td:gt(4)").css("backgroundColor", "yellow");
});
});
</script>
</body>
</html>
效果说明：
页面加载后，所有单元格都是默认样式。当你点击按钮，jQuery 会把所有 <td> 元素视作一个平级序列（尽管它们跨了多行，但在 DOM 选择器看来，它们都是 table 下的兄弟节点）。然后，索引为 0 到 4 的单元格保持不变，而从索引 5（显示“索引 5”）开始的单元格，一直到之后一个索引 12，背景色都会变成黄颜色。
为什么用 $("td:gt(4)") 而不是 $("td").slice(5) ？
这其实是一个个人偏好和场景选择的问题。:gt() 选择器直接集成在 jQuery 的主选择器中，写法非常精简，符合条件即筛除的思维。而 .slice() 方法则是在获取完整的 jQuery 对象后再进行截取，它用起止索引来描述区间，对于选中“索引 2 到 6”这样的连续片段会更直观。如果你的筛选条件是单一不等式的“大于”或“小于”，那么 :gt() 和 :lt() 就是为此量身定做的，语义化更好。
学完即用的小练习：
你可以在上面的代码基础上修改，尝试将 $("td:gt(4)") 替换为 $("td:lt(3)")，看看哪些单元格会变色。然后，再挑战一下组合用法：尝试写出同时使用 :gt(2):lt(8) 的代码，这个选择器会精确地命中索引为 3、4、5、6、7 的这五个单元格，体会它们是如何界定出一个选区的。
关键术语
-
:gt(index)选择器：匹配索引大于指定值的元素。 -
:lt(index)选择器：匹配索引小于指定值的元素。 -
零基索引 (Zero-based Index)：计数从 0 开始的索引规则。
-
DOM 兄弟节点 (Siblings)：拥有相同父元素的节点，jQuery 的索引筛选正是基于这个同级序列。
