Skip to content
jQuery parents method
In This Tutorial
The parents vs parent method
Unlike the jQuery .parent method, the .parents method traverses all levels up to find the “parents” of the specified element whereas .parent method travels just one level up.
See an example of parents method
To understand that, consider this structure:
<div>
<p>Child of div
<span>child of p and grandchild of div</span>
</p>
</div>
In that case, the div is a parent, p is a child of div while the span is the child of p and grandchild of the div element.
If you specify <span> element in jQuery parents method, it will travel through upper levels, to <p>, <div> to <HTML>.
How to use the jQuery $.parents method?
The syntax to use $.parents:
$(“child_element”).parents();
See the following section of $.parents method examples.
A parents method example
In this example, we used jQuery parents method and specified the span element, which is the grandchild of div1.
As you click the button “Run parents method” it will not only add CSS to <p> and <div> but also travels through HTML that adds CSS to other elements as well.
See demo by clicking the link below:
Experience this example online
|
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
</script>
<script>
$(document).ready(function(){
$(“#parent_met”).click(function(){
$(“#para2”).parents().addClass(“parentclass”);
});
});
</script>
<style>
.parentclass{
border: 1px dashed #C03009;
font-size: 16px;
color: #013B00;
}
</style>
</head>
<body>
<div id=“divfind”>This is div parent element!
<p id=“para2”>This is child paragraph of Div<br />
<span>This is span, child of paragraph and grandchild of div</span>
</p>
</div>
<div id=“divfind2”>This is div parent element2!
<p>This is child paragraph of Div<br />
<span>This is span, child of paragraph and grandchild of div</span>
</p>
</div>
<hr />
<button id=“parent_met”>Run parents method</button>
</body>
</html>
|
Using filter with parents jQuery method example
You can apply a filter to specify which parent level to go as using the $.parents method. In above example, as we did not specify any parent so the CSS was added across.
In this example, we will filter div1 and see the difference:
Experience this example online
|
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
</script>
<script>
$(document).ready(function(){
$(“#parent_met”).click(function(){
$(“#para2”).parents(“#divfind”).addClass(“parentclass”);
});
});
</script>
<style>
.parentclass{
border: 1px dashed #C03009;
font-size: 16px;
color: #013B00;
}
</style>
</head>
<body>
<div id=“divfind”>This is div parent element!
<p id=“para2”>This is child paragraph of Div<br />
<span>This is span, child of paragraph and grandchild of div</span>
</p>
</div>
<div id=“divfind2”>This is div parent element2!
<p>This is child paragraph of Div<br />
<span>This is span, child of paragraph and grandchild of div</span>
</p>
</div>
<hr />
<button id=“parent_met”>Run parents method</button>
</body>
</html>
|
You can see, the CSS will be added to div1 only.
Useful reading: jQuery find | jQuery children
Leave A Comment?