jQuery closest() 方法
示例
返回 <span> 的第一个祖先元素，该祖先元素是 <ul> 元素
$(document).ready(function(){
$("span").closest("ul").css({"color": "red", "border": "2px solid red"});
});
结果
body (曾祖父)div (祖父)ul (第二个祖先 - 第二个祖父)ul (第一个祖先 - 第一个祖父)- li (直接父级) span
自己动手试一试 »
定义和用法
closest() 方法返回选中元素的第一个祖先元素。
祖先是父级、祖父级、曾祖父级等。
DOM 树： 该方法会从当前元素开始，向上遍历整个 DOM 树，直到文档的根元素（<html>），以查找 DOM 元素中的第一个祖先。
此方法与 parents() 类似，它们都遍历 DOM 树向上。区别如下：
closest()
- 从当前元素开始
- 遍历 DOM 树并返回第一个（单个）匹配传递表达式的祖先
- 返回的 jQuery 对象包含零个或一个元素
parents()
- 从父元素开始
- 遍历 DOM 树并返回所有匹配传递表达式的祖先
- 返回的 jQuery 对象包含零个或多个元素
其他相关方法
- parent() - 返回选中元素的直接父元素
- parentsUntil() - 返回两个给定参数之间的所有祖先元素
语法
返回选中元素的第一个祖先
$(选择器).closest(过滤器)
返回第一个祖先，使用 DOM 上下文在 DOM 树中向上查找
$(选择器).closest(过滤器,上下文)
| 参数 | 描述 |
|---|---|
| 筛选器 | 必需。指定一个选择器表达式、元素或 jQuery 对象来缩小祖先搜索范围 |
| context | 可选。一个 DOM 元素，其中可能找到匹配的元素 |
亲手尝试 - 示例
返回 <span> 的第一个祖先元素，该祖先元素是 <span> 元素
由于此方法从当前元素开始，因此搜索 <span> 的第一个 <span> 将返回 <span>。
传递一个 DOM 元素作为上下文，用于搜索第一个祖先元素
同时使用这两个参数来传递一个 DOM 元素作为上下文，用于搜索第一个 <ul> 元素。
