jQuery遍历祖先知识汇总

jQuery遍历祖先元素指南

编程小白也能轻松理解的DOM向上导航方法

在jQuery中，遍历祖先元素是指从一个DOM元素出发，向上查找其父级、祖父级等祖先元素的过程。这就像是在家族树中查找你的父母、祖父母等长辈一样简单！

本指南将详细介绍四种常用的祖先遍历方法，每种方法都配有清晰解释和实用示例，帮助您轻松掌握这些关键技能。

parent()方法

parent() 方法就像查找你的”亲生父母” – 它只选择当前元素的直接上一级元素。

// 找到所有span的直接父元素
$(“span”).parent();

// 找到所有li的直接父元素，且该父元素是div
$(“li”).parent(“div”);

parents()方法

parents() 方法就像是查找你的”整个家族树” – 它会选择当前元素的所有祖先元素，一直到文档根元素!

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

// 找到所有span的祖先中所有div元素
$(“span”).parents(“div”);

parentsUntil()方法

parentsUntil() 方法就像查找”从你到你指定长辈之间的所有长辈” – 它会选择当前元素到指定祖先之间的所有元素。

// 找到所有span到div之间的所有祖先
$(“span”).parentsUntil(“div”);

// 找到li到ul之间的所有祖先，且这些祖先是div
$(“li”).parentsUntil(“ul”, “div”);

closest()方法

DOM树祖先遍历演示

<html>

<body>

请点击上面的按钮查看不同祖先遍历方法的效果。
蓝色节点表示当前选中的目标元素，红色节点表示遍历结果。

方法名称	描述	是否包含自身	返回元素数量	查找方向	典型用途
parent()	直接父元素	否	0-1个（每个元素）	仅向上1级	获取最近的父容器
parents()	所有祖先元素	否	0-n个	向上直到根元素	查找多个祖先元素
parentsUntil()	到指定元素之间的祖先	否	0-n个	向上直到指定元素	特定范围内的祖先
closest()	最近的匹配祖先	是	0-1个	向上直到找到匹配	最近的特定类型祖先