JQuery Parent :

JQuery Parent is a method, it is used to get the direct parent element of the selected element. The parent() method is comes under the concept of JQuery Ancestors.

Ancestor is said to be a parent or grandparent or great-grandparent and so on. In jQuery, traverse up the DOM tree is used to find the ancestors of the element in three methods.

JQuery parent() :

This method is used to return the direct parent element of the selected element.This method is only used to traverse up the DOM tree

$("target").parent();

OR

$("target").parent("class");

Example :

[html]

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JQuery parent demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <div>
        <p>Hello</p>
    </div>
    <div class="sample">
        <p>Sample Hello</p>
    </div>

    <script>
        $("p").parent(".sample").css("background", "#027d3a");
    </script>

</body>
</html>

[/html]

JQuery parents() :

This method is used to return all the ancestor elements of the selected element.

$("#target").parents(".selected");

Example :

[html]

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JQuery parents demo</title>
<script src="https://code.jquery.com/jquery-1.12.2.js"></script>
</head>
<body>

    <div>
        <p>
            <span> <b>My parents are: </b>
            </span>
        <div id="parents"></div>
        </p>
    </div>
    <script>
        alert("hai")
        var parentEls = $("b").parents().map(function() {
            return this.tagName;
        }).get().join(", ");
        $("#parents").append("<strong>" + parentEls + "</strong>");
    </script>
</body>
</html>
[/html]

parentsUntil() :

This method is used return all the ancestor elements between two given arguments.

$("#target").parentsUntil("class1");

Example:

[html]

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JQuery parentsUntil demo</title>
<script src="https://code.jquery.com/jquery-1.12.2.js"></script>
</head>
<body>

    <div>
        <p>
            <span> <b>My parents are: </b>
            </span>
        <div id="parents"></div>
        </p>
    </div>
    <script>
        alert("hai")
        var parentEls = $("b").parentsUntil("div").map(function() {
            return this.tagName;
        }).get().join(", ");
        $("#parents").append("<strong>" + parentEls + "</strong>");
    </script>

</body>
</html>
[/html]

Happy Learning 🙂

About the Author:

Founder of onlinetutorialspoint.com Love Java, Python, Shell and opensource frameworks. Follow him on twitter and facebook for latest updates.

Leave A Comment