jQuery 遍历过滤 – BuildCodePro

jQuery遍历与过滤知识点大全

编程小白也能看懂的jQuery核心操作指南

纵向遍历（上下级）

向下遍历 – 找孩子

方法

.children()

直接查找元素的亲生孩子（只找一层）

$(“#parent”).children(); // 找到parent的所有直接子元素

方法

.find()

查找元素的所有后代（不限层级，孙子辈也能找到）

$(“#grandpa”).find(“.descendant”); // 查找grandpa下所有有descendant类的后代

向上遍历 – 找长辈

方法

.parent()

直接查找元素的父亲（只找一层）

$(“#child”).parent(); // 找到child的直接父元素

方法

.parents()

查找元素的所有祖先（一直找到最顶层的祖宗）

$(“#child”).parents(); // 找到child的所有祖先元素

方法

.closest()

查找最近的匹配祖先元素（找到第一个匹配的就停止）

$(“span”).closest(“div”); // 找到离span最近的div祖先

横向遍历（兄弟元素）

查找所有兄弟

方法

.siblings()

查找元素的所有兄弟（不包括自己）

$(“#middle”).siblings(); // 找到middle的所有兄弟元素

查找特定方向兄弟

方法

.next()

查找元素的下一个兄弟

$(“#first”).next(); // 找到first的下一个兄弟

方法

.prev()

查找元素的上一个兄弟

$(“#last”).prev(); // 找到last的上一个兄弟

方法

.nextAll()

查找元素后面的所有兄弟

$(“#second”).nextAll(); // 找到second之后的所有兄弟

方法

.prevAll()

查找元素前面的所有兄弟

$(“#fourth”).prevAll(); // 找到fourth之前的所有兄弟

过滤方法

基本过滤

方法

.first()

获取元素集合中的第一个元素

$(“div”).first(); // 获取第一个div元素

方法

.last()

获取元素集合中的最后一个元素

$(“li”).last(); // 获取最后一个li元素

方法

.eq()

获取元素集合中指定索引的元素（从0开始）

$(“p”).eq(2); // 获取第3个p元素

条件过滤

方法

.filter()

从集合中筛选出符合条件的元素

$(“div”).filter(“.important”); // 筛选出有important类的div

方法

.not()

从集合中排除符合条件的元素

$(“p”).not(“.note”); // 排除有note类的p元素

方法

.has()

筛选出包含特定后代的元素

$(“div”).has(“p”); // 筛选出包含p元素的div

爷爷元素
.parents()向上找所有长辈

父元素
.parent()直接父亲

当前元素

兄弟元素1
.siblings()

兄弟元素2
.next()/.prev()

子元素
.children()

孙子元素
.find()向下找所有后代