Skip to content
jQuery parent – How to use $.parent with examples
In This Tutorial
The parent method of jQuery
The parent method traverses just one level up and searches the parent of the specified element.
See parent example to add text
Watch Video Tutorial of Parent method
Consider this structure in DOM:
<div>
<p>Paragraph text here
<span>span content here</span>
</p>
</div>
In that case, the div is a parent, p is the child of div while the span is a child of p and grandchild of the div element. If you specify <span> element in jQuery parent method, it will get <p> as the parent of span element! That is, the parent method will travel just one level up and get the parent of the specified element.
See another example with CSS
Similarly, if you specify <p> in the parent method, it will get the div element as the parent of <p> in above structure.
Note: In order to get all ancestors of the specified element, i.e. if you specify <span> and want to get all parents upwards you can use parents method of jQuery.
This tutorial explains only about parent method of jQuery. You can see examples below but let us first look at the basic syntax of the $.parent method.
Syntax of $.parent method of jQuery
The basic syntax of the $.parent method of jQuery is:
$(“child_element”).parent();
Where a child element can be a selector, an element like span, paragraph, div etc.
Example of jQuery parent method to add text
In this example, we have three levels; the first level is parent div while the second level is a paragraph within the div. The third level is a span element which is the child of the paragraph while grandchild of div.
The parent method will specify span element that will get parent (paragraph in that case) and add text ahead of this parent paragraph by using the after method. See 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
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
</script>
<script>
$(document).ready(function(){
$(“#parent_met”).click(function(){
$(“span”).parent().after(“some test text <br> “);
});
});
</script>
</head>
<body>
<div id=“divfind”>This is div parent element!
<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 parent method</button>
</body>
</html>
|
You can see, as you click the button it finds span parent which is a paragraph and adds some text content “some test text”.
jQuery get parent and add CSS example
In this example, we will specify paragraph in jQuery parent method that will get parent (div) and adds some CSS by using the addClass method. See demo 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
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
</script>
<script>
$(document).ready(function(){
$(“#parent_met”).click(function(){
$(“p”).parent().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>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 parent method</button>
</body>
</html>
|
You can see, when you click the button “Run parent method”, it will get the parent of a paragraph which is a div. This will apply CSS class by using the addClass function in div element that covers all child elements as well.
So, the dashed border line along with color change will be applied to not only in div but also p and span element as well.
Related reading: jQuery find method | jQuery $.children | jQuery $.filter | jQuery parents method
Leave A Comment?