jQuery 过滤方法

jQuery 过滤方法完全指南 · 难度：入门 · +10XP

jQuery 过滤方法完全指南

jQuery提供了丰富的过滤方法，让你能够从已选中的元素集合中进一步筛选出目标元素。这些方法比直接用选择器更灵活，可以在复杂交互中动态地缩小或扩展选择范围。掌握过滤方法是高效jQuery编程的关键。

基本过滤方法

// HTML结构（假设有5个li）
<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  <li>第四项</li>
  <li>第五项</li>
</ul>
// jQuery 过滤操作
$("li").first();           // 第一项
$("li").last();            // 第五项
$("li").eq(2);             // 第三项（索引从0开始）
$("li").eq(-1);            // 第五项（负数从末尾倒着数）
$("li").slice(1, 4);      // 第二、三、四项（索引1到3，不含4）
$("li").slice(2);          // 第三、四、五项（从索引2到末尾）

条件过滤方法

// .filter(selector|function): 保留满足条件的元素
$("li").filter(".active");               // 保留带active类的li
$("li").filter(":even");                 // 保留偶数索引的li
$("li").filter(function(index) {
  return $(this).text().length > 3;      // 保留文本长度>3的li
});

// .not(selector|function): 排除满足条件的元素（filter的反操作）
$("li").not(".disabled");                // 排除带disabled类的li
$("li").not(":first");                   // 排除第一个li
$("li").not(function(index) {
  return index % 2 === 0;                // 排除偶数索引的li
});
// .has(selector): 保留包含特定后代元素的父元素
$("div").has("p.highlight");             // 保留内部有p.highlight的div
$("li").has("ul");                       // 保留包含子ul的li

查找方法（拓展选择范围）

// .find(selector): 在当前元素的后代中查找
$("div.container").find("span");         // 在container内找所有span

// .children([selector]): 获取直接子元素
$("ul").children();                      // 所有直接子li
$("ul").children(".active");            // 只有带active类的直接子li
// .parent(): 获取直接父元素
$("span").parent();                     // 各span的直接父元素
// .parents([selector]): 获取所有祖先元素
$("span").parents("div");               // 所有div祖先
// .siblings([selector]): 获取所有兄弟元素
$(".current").siblings();               // 所有兄弟（不含自己）
$(".current").siblings(".highlight");   // 带highlight类的兄弟

遍历辅助方法

// .each(function(index, element)): 遍历每个元素
$("li").each(function(i) {
  console.log(i + ": " + $(this).text());
});

// .is(selector): 检查是否匹配（返回boolean）
if ($(this).is(".active")) {
  console.log("当前元素有active类");
}
// 常用于事件处理中的条件判断
$("li").on("click", function() {
  if ($(this).is(":first-child")) {
    alert("点击了第一个列表项！");
  }
});

实战练习

1. 获取所有列表项的第二个元素并高亮显示
2. 使用filter方法过滤出文本长度超过5个字的元素
3. 在当前列表项被点击时，用siblings移除其他项的高亮
4. 用find方法在表单中查找所有未选中的复选框
5. 组合使用eq、filter、not实现复杂的元素筛选