jQuery parent() method

jQuery parents() method

The parent() is an inbuilt method in jQuery that is used to find the parent element of the selected element. This parent() method in jQuery traverses a single level up and returns the first parent element of the selected element.

Syntax:

$('element_selector').parent()

Parameter:

It takes an optional parameter to filter the parent element by passing the class or the ID contained by the parent.

Return value:

It returns the parent element of the selected element.

Example: The below example illustrate the use of the parent() method to return the parent of the selected element.

html

<!DOCTYPE html>
<html>
 
<head>
    <style>
        .main_div * {
            display: block;
            border: 1px solid green;
            color: green;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
 
    </script>
    <script>
        $(document).ready(function () {
            $("span").parent().css({
                "color": "#000",
                "border": "2px solid #000"
            });
        });
    </script>
</head>
 
<body>
 
    <div class="main_div">
        <div style="width:500px;">
          div (Great-Grandparent)
            <ul>
              This is the grand-parent of the selected span element.!
                <li>
                  This is the parent of the selected span element.!
                    <span>
                      This is the span element !!!
                  </span>
                </li>
            </ul>
        </div>
    </div>
</body>
 
</html>

Output:

jQuery parent() & parents() Method

In this article, we will learn about the parent() and the parents() methods of jQuery in detail with their practical implementation using the code examples.

Table of Content

jQuery parent() method
jQuery parents() method

Tags:

#jQuery-Methods #JQuery #Web Technologies