描述: 获得集合中每个匹配元素的祖先元素,可以提供一个可选的选择器作为参数。
-
添加的版本: 1.0.parents( [selector ] )
-
selector类型: Selector一个选择器字符串,用于匹配元素的选择器表达式字符串。
-
如果提供的jQuery代表了一组DOM元素,.parents()
方法允许我们能够在DOM树中搜索到这些元素的祖先元素,从有序的向上匹配元素,并根据匹配的元素创建一个新的 jQuery 对象;返回的元素秩序是从离他们最近的父级元素开始的(注:从里到外的顺序)。当多个DOM元素在原有集合中,返回的集合将是原来元素以相反的顺序排序, 并且重复删除。
如果提供的jQuery代表了一组DOM元素,.parent()
方法允许我们能够在DOM树中搜索到这些元素的父级元素,从有序的向上匹配元素,并根据匹配的元素创建一个新的 jQuery 对象。
.parents()
和.parent()
方法是相似的,但后者只是进行了一个单级的DOM树查找(注:也就是只查找一层,直接的父元素,而不是更加上级的祖先元素)。此外,$( "html" ).parent()
方法返回一个包含document
的集合,而$( "html" ).parents()
返回一个空集合。
该方法还可以接受一个可选的选择器表达式,该选择器表达式可以是任何可传给 $()
函数的选择器表达式。如果提供了选择器表达式,那么会先测试该元素是否满足匹配的选择器表达式。
考虑一个基本的嵌套列表页:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
|
如果我们在项目A开始,我们可以找到它的祖先元素:
1
|
|
这段代码调用后的结果是:ul.level-2,li.item-ii和ul.level-1元素是红色背景(并在DOM树中向上遍历,直到<html>
元素)。由于我们没有提供一个选择器表达式,所以所有的祖先元素都是返回的 jQuery 对象的一部分。如果我们提供了选择器,那么只有匹配该选择器的元素才会被包含在结果( jQuery 对象)中。
例子:
Example: 查找每个 b 标签的所有父元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
|
Example: 点击元素,查找每个 span 标签的所有独一无二的 div 父元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
|
转载请注明:悠然品鉴 » jQuery .parents() 用法 手册 | 示例代码