jQuery 过滤

选择器选中的常常是一大组元素，而我们可能只想要其中的第一个、最后一个、第 N 个，或符合某条件的那几个。jQuery 的过滤方法 first()、last()、eq()、filter()、not() 专门做这类收窄。

演示用的列表：

<ul id="list">
    <li>苹果</li>
    <li class="hot">香蕉</li>
    <li>橘子</li>
    <li>西瓜</li>
</ul>

first() 与 last()：首尾元素

first() 返回匹配集合中的第一个元素，last() 返回最后一个：

$("#list li").first().css("background", "yellow"); // 效果：苹果变黄
$("#list li").last().css("background", "green");   // 效果：西瓜变绿

eq()：按索引取元素

eq(数字) 按索引（从 0 开始）取第 n 个元素，支持负数（从末尾倒数）：

$("#list li").eq(1).css("font-weight", "bold"); // 效果：索引 1 = 香蕉加粗
$("#list li").eq(-1).css("color", "red");        // 效果：-1 表示倒数第 1 个 = 西瓜变红

eq(0) 等价于 first()；eq(-1) 等价于 last()。

filter()：按条件筛选

filter(选择器或函数) 保留符合条件的元素：

$("#list li").filter(".hot").css("background", "orange");
// 效果：带 class="hot" 的香蕉背景变橙

$("#list li").filter(function (index) {
    return index % 2 === 0; // 保留索引为偶数的元素
}).css("color", "blue");
// 效果：索引 0、2 的苹果、橘子变蓝

函数形式可写复杂判断，回调里 this 是当前 DOM 元素。

not()：排除指定元素

not() 与 filter() 相反，剔除符合条件的，留下其余的：

$("#list li").not(".hot").css("color", "gray");
// 效果：香蕉被排除，苹果、橘子、西瓜变灰

切片类方法对比

方法	作用	示例结果（对 4 个 li）
first()	取第 1 个	苹果
last()	取最后 1 个	西瓜
eq(n)	取第 n+1 个	eq(1) → 香蕉
filter(".hot")	保留匹配	香蕉
not(".hot")	排除匹配	苹果、橘子、西瓜

小结

过滤方法负责"从大集合里挑小集合"：首尾用 first/last、按位置用 eq、按条件用 filter、反选排除用 not。配合遍历使用，就能精确锁定任何目标元素。