jQuery :parent Selector
Last Updated :
17 Nov, 2022
Improve
The jQuery :parent selector is used to select all elements that are the parent of another element, including text nodes.
Syntax:
$(":parent")
Example 1: In this example, we will select all the parent elements of the <li> by using jQuery :parent Selector.
HTML
<!DOCTYPE html><html> <head> <title> jQuery :parent() Selector </title> <script src= </script> <script> $(document).ready(function () { $("li:parent").css( "background-color", "green"); }); </script></head> <body> <center> <h1 id="geeks1"> GeeksForGeeks</h1> <h2 id="geeks2"> jQuery :parent() Selector </h2> <div> <li>Geek1</li> <li></li> <li>Geek3</li> <li>Geek4</li> <li></li> <li>Geek6</li> </div> </center></body> </html> |
Output:
Example 2: In this example, we will add a border to the parent elements of <li> with the help of click function.
HTML
<!DOCTYPE html><html> <head> <title> jQuery :parent() Selector </title> <script src= </script> <script> $(document).ready(function () { $("button").click(function () { $("li:parent").css( "border", "2px solid red"); }); }); </script></head> <body> <center> <h1 id="geeks1"> GeeksForGeeks</h1> <h2 id="geeks2"> jQuery :parent() Selector </h2> <div> <li>Geek1</li> <li></li> <li>Geek3</li> <li>Geek4</li> <li></li> <li>Geek6</li> <br> <button>Add Border</button> </div> </center></body> </html> |
Output:
