在处理表格、列表这类结构规整的 DOM 元素时，经常会碰到一个需求：只操作前几项，忽略后面的。jQuery 提供了 :lt() 选择器专门应对这种场景。lt 是 "less than" 的缩写，它筛选出所有索引值小于指定数值的元素。
索引从 0 开始计数。这一点很重要，如果你写 $("tr:lt(3)")，实际选中的是索引为 0、1、2 的三行，也就是前三行，而不是三行以下的内容。很多新手在这里卡壳，因为自然语言说“小于3”容易下意识排除掉3本身，但把数字代入索引后，逻辑就很清晰了。
和它配对的是 :gt() 选择器（greater than），专门筛选索引值大于指定数值的元素。两者经常配合使用，圈定一个索引范围内的元素。
语法
$(":lt(index)")
index 是必需参数，指定一个索引阈值。所有索引值低于这个数字的元素都会被选中。注意，:lt() 不能单独使用，它必须依附在某个元素选择器后面，比如 $("li:lt(5)") 或 $("tr:lt(2)")。
为什么用索引选择器而不是手动加类名？
我个人在开发数据报表页面时碰到过一个典型场景：后端返回一个长长的表格，产品要求前五行高亮显示，突出重要数据。最粗暴的做法是给前五个 <tr> 直接加类名，但数据是动态渲染的，每次加类名还得在模板循环里判断索引，代码瞬间变丑。后来改用 $("tr:lt(5)") 一行搞定，不管表格数据怎么变，逻辑始终稳定，也省去了模板里的条件判断。:lt() 处理这类“只关心位置、不关心内容”的需求，比在模板或服务器端做标记要干净得多。
实战示例：高亮表格前几个单元格
下面这个例子对一个表格使用 :lt() 选择器。表格里有三行，每行若干单元格，我们通过按钮触发筛选，把索引小于 4 的 <td> 全部背景标黄。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery :lt() 选择器实战</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h2>使用 :lt() 选择器按索引筛选表格单元格</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>点击按钮，将索引值小于 4 的单元格背景变为黄颜色。</p>
<button>筛选前4个单元格</button>
<script>
$(document).ready(function() {
$("button").click(function() {
// 选中所有 td 中索引小于 4 的元素
$("td:lt(4)").css("backgroundColor", "yellow");
});
});
</script>
</body>
</html>
页面加载后，表格显示全部 13 个单元格，索引从 0 到 12。点击按钮，只有第一行的前四个单元格（索引 0、1、2、3）高亮为黄颜色，其余单元格不变。这里 td:lt(4) 表达的含义是“在所有 <td> 构成的中，取出位置编号小于 4 的成员”。
本节课程知识要点
-
:lt(index)的索引从 0 开始，:lt(4)实际选中索引 0、1、2、3 这四个元素。 -
:lt()和:gt()经常搭配使用，例如$("li:gt(2):lt(5)")可以筛选出索引处于某个区间内的元素。不过要注意选择器的链式叠加顺序对结果的影响。 -
这个选择器关注的是元素在中的位置，和元素的内容、属性没有任何关系。当你面对“前几条”“后几条”这种纯粹基于位置的筛选需求时，
:lt()和:gt()比手动遍历判断要直接得多。 -
:lt()与:eq()、:first、:last等同属 jQuery 的索引过滤选择器家族，理解它们各自的边界能让你在 DOM 筛选时更得心应手。
如果你正在做数据可视化、表格高亮或者列表截断之类的功能，:lt() 是一个值得放进工具箱的筛选手段，用好了能让不少看似复杂的定位逻辑迎刃而解。
