描述: 从元素本身开始,在DOM 树上逐级向上级元素匹配,并返回最先匹配的祖先元素。
-
添加的版本: 1.3.closest( selector )
-
selector类型: Selector一个用于匹配元素的选择器字符串。
-
-
添加的版本: 1.4.closest( selector [, context ] )
-
selector类型: Selector一个用于匹配元素的选择器字符串。
-
context类型: ElementDOM元素在其中一个匹配的元素可以被发现。如果没有上下文在当时的情况下通过了jQuery集合将被使用。
-
-
添加的版本: 1.6.closest( jQuery object )
-
jQuery object类型: jQuery一个用于匹配元素的jQuery对象。
-
-
添加的版本: 1.6.closest( element )
-
element类型: Element一个用于匹配元素的DOM元素。
-
鉴于一个jQuery对象,表示一个DOM元素的集合,.closest()
方法允许我们在DOM树上查找这些匹配的元素和他们的祖先元素,并且构造一个新的jQuery对象。.parents()
和.closest()
方法类似,它们都在DOM树遍历了。两者之间的差异,尽管细微,是重要的:
.closest() |
.parents() |
---|---|
开始于当前元素 | 开始于父元素 |
在 DOM 树中向上遍历,直到找到了与提供的选择器相匹配的元素 | 向上遍历DOM树到文档的根元素,每个祖先元素加入到临时集合,如果提供一个选择器,则会使用该选择器在集合中进行过滤 |
返回包含零个或一个元素的jQuery对象 | 返回包含零个,一个或多个元素的jQuery对象 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
|
假设我们从项目 A开始执行一个搜索<ul>
:
1
2
|
|
这将改变level-2 <ul>
的颜色,因为当向上遍历DOM树时,这是第一次遇到的匹配元素。
假设我们是一个搜索<li>
元素来代替:
1
2
|
|
其结果是改变了列表项 A 的元素。.closest()
方法是从自身元素开始查找的,然后在 DOM 树中向上遍历,直到找到了所提供的表达式列表项 A。
我们可以传递一个DOM元素作为上下文在其中搜索最近的元素的。
1
2
3
4
5
|
|
这将改变level-2 <ul>
的颜色,因为它既是项目A的第一个<ul>
祖先又是项目II的一个后裔。它将不会改变level-1 <ul>
的 颜色 ,因为它不是项目II的后代。
例子:
Example: 显示什么样的事件委托能用closest完成。closest 列表元素或者其后代被点击进行切换一个黄色的背景。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
|
Example: 传递一个jQuery对象给closest. closest 列表元素或者其后代被点击进行切换一个黄色的背景。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
|
描述: 以数组的形式返回与选择器相匹配的所有元素,从当前元素开始,在 DOM 树中向上遍历。
-
添加的版本: 1.4.closest( selectors [, context ] )
-
selectors类型: Array数组或字符串,其中包含一个选择表达式匹配的元素对(也可以是一个jQuery对象)。
-
context类型: Element用于查找可能匹配到的 DOM 元素。如果不提供 context 参数,那么会使用 jQuery 集合的 context。
-
下面这个方法 (only!) jQuery1.7中不赞成使用,在jQuery1.8中被删除。它主要是为了让插件作者在内部使用。
转载请注明:悠然品鉴 » jQuery .closest() 用法 手册 | 示例代码