If you want to apply the CSS to the parent element of the selected, you can use the jQuery parent method to do this. The method requires only the selector to select the element to which you want to apply the CSS to the parent.
You can use id’s or class name to select the HTML element. You can use the other methods like the jQuery addClass method to add the class and other methods with the jQuery parent method as given below.
How to Find the Parent of HTML Element Using jQuery parent() Method
You have to follow the syntax given below.
Syntax
|
1 |
$(selector).parent() |
See the example given below to learn the working of the jQuery parent method.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script> $(document).ready(function(){ $("#btn-parent").click(function(){ $("#myul").parent().addClass("myclass"); }); }); </script> <style> .myclass{ background:#ccc; padding:10px 0; } </style> <div> <button id="btn-parent">Click me to Set Parent Class</button> </div> <div> <ul id="myul"> <li>Welcome to Tutorialdeep Web Tutorial!</li> <li>Learn jQuery With Working Examples.</li> </ul> </div> |
Output
- Welcome to Tutorialdeep Web Tutorial!
- Learn jQuery With Working Examples.
The above example add the class to the parent of the selected HTML element. After you click the button given above, the parent() add the class to the parent Element and so apply the CSS comes with the class.