The jQuery parent() method can be used to get the parent of the selected element. You can find the single or multiple parent element of the selected element. The parent can also be filtered by passing the parameter to the method.
Syntax
The syntax of this method is given below:-
Description of the Parameters
The description of these parameters is given below.
| Parameter Name | Description |
|---|---|
| selector | Specify the element to select its parent element. You can use the element tag name, class name, or id to select. It is a required field. |
| filter | Specify the element to filter from the selected parent elements. You can specify single or multiple comma-separated elements to select. It is an optional field. |
jQuery parent() Method to Get Parent Elements
If you want to get the parent of the selected element, you have to use the method as given below. The example contains the list element and button element.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(document).ready(function(){ $('.mybtn').click(function(){ $("ul li em").parent().css("color","orange"); }); }); </script> <ul> <li>Welcome to TutorialDeep.</li> <li><em>This is a jQuery tutorial.</em></li> <li>Learn from live examples.</li> </ul> <button type="button" class="mybtn">Click to Get Parent</button> |
Output
- Welcome to TutorialDeep.
- This is a jQuery tutorial.
- Learn from live examples.
When you click the button element given above, it selects the parent element of the specified em element. After selecting the element, it applies the color to the text of the element that contains em element.
Select parent Using Filter Single Element
If you want to select the specified parent element from the selected element, you have to use the method as given below. The example selects a single parent list element as specified.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(document).ready(function(){ $('.mysnbtn').click(function(){ $("ul li em").parent("li.last").css("color","red"); }); }); </script> <ul> <li>Welcome to TutorialDeep.</li> <li><em>This is a jQuery tutorial.</em></li> <li class="last"><em>Learn from live examples.</em></li> </ul> <button type="button" class="mysnbtn">Click to Get Parent</button> |
Output
- Welcome to TutorialDeep.
- This is a jQuery tutorial.
- Learn from live examples.
Click the button given above to get the specified parent element for the selected em element. There are two list elements that contain the selected em element. However, only the last list element contains the class ‘last’.
Get Multiple parent Elements Using jQuery parent() Method
You can also find multiple parent elements of the selected element. To find the multiple parent elements, you have to specify the comma-separated tag name, class name, or id of the parent element.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(document).ready(function(){ $('.mymultibtn').click(function(){ $("ul li em").parent("li.first, li.last").css({"border":"1px solid orange","color":"green"}); }); }); </script> <ul> <li class="first"><em>Welcome to TutorialDeep.</em></li> <li class="second"><em>This is a jQuery tutorial.</em></li> <li class="last"><em>Learn from live examples.</em></li> </ul> <button type="button" class="mymultibtn btn btn-primary">Click to Get Multiple Parent</button> |
Output
- Welcome to TutorialDeep.
- This is a jQuery tutorial.
- Learn from live examples.
When you click the button given above, it selects multiple specified parent elements from the selected element.
You may also like to read
I hope you like this tutorial on jQuery parent() method. If you have any queries regarding the tutorial, please comment below.
References