jQuery Traversing Ancestors

An ancestor is a parent, grandparent, great-grandparent, and so on in logical connections. jQuery includes handy methods such as parent(), parents(), and parentsUntil() that may be used to navigate up in the DOM tree on a single or several levels to quickly find the parent or other ancestors of an element in the hierarchy.

jQuery parent() Method

The jQuery parent() function is used to get the element's immediate parent. The following example uses the class to highlight the <ul>, which is the immediate parent element of the <li> highlight on document ready.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box * {
            display: block;
            border: 2px solid #f2f3f5;
            color: #212b36;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>

<h1>Select the Parent Element</h1>
<div class="box">
    <div style="width:300px;">div
        <ul>ul
            <li>li
                <span>span</span>
            </li>
        </ul>
    </div>
</div>

<script>
    $(document).ready(function(){
        $("span").parent().css({"color": "#00ab55", "border": "2px solid #00ab55"});
    });
</script>
</body>
</html>

Preview

jQuery parents() Method

To find the ancestors of the chosen element, use the jQuery parents() function. The example below will place a border around all of the ancestor elements of the <li>, which are the <ul>, <div>, <body>, and <html> components.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box * {
            display: block;
            border: 2px solid #f2f3f5;
            color: #212b36;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>

<h1>Select All the Parents Element</h1>
<div class="box">
    <div style="width:300px;">div
        <ul>ul
            <li>li
                <span>span</span>
            </li>
        </ul>
    </div>
</div>

<script>
    $(document).ready(function(){
        $("span").parents().css({"color": "#ff4842", "border": "2px solid #ff4842"});
    });
</script>
</body>
</html>

Preview

You can optionally pass one or more selectors as parameters to the parents() function to narrow down your search for ancestors. The border will be applied around all the ancestors of the <li> that are <div> elements in the following example.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box * {
            display: block;
            border: 2px solid #f2f3f5;
            color: #212b36;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>

<h1>Select the Specific Elements</h1>
<div class="box">
    <div style="width:300px;">div
        <ul>ul
            <li>li
                <span>span</span>
            </li>
        </ul>
    </div>
</div>

<script>
    $(document).ready(function(){
        $("span").parents("ul").css({"color": "#ffc107", "border": "2px solid #ffc107"});
    });
</script>
</body>
</html>

Preview

jQuery parentsUntil() Method

The jQuery parentsUntil() function returns all ancestors up to but excluding the element matched by the selection. In a nutshell, it retrieves all ancestor items in a DOM hierarchy between two provided components. The following example will create a border to all ancestor elements of the <li> except the <html> element, i.e. apply a border to the <ul>, <div>, and <body> elements.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box * {
            display: block;
            border: 2px solid #f2f3f5;
            color: #212b36;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>

<h1>Select All the Ancestors between Two Elements</h1>
<div class="box">
    <div style="width:300px;">div
        <ul>ul
            <li>li
                <span>span</span>
            </li>
        </ul>
    </div>
</div>

<script>
    $(document).ready(function(){
        $("span").parentsUntil("div").css({"color": "#1890ff", "border": "2px solid #1890ff"});
    });
</script>
</body>
</html>

Preview

jQuery Traversing

jQuery Descendants

jQuery Traversing Ancestors

jQuery parent() Method

Example

jQuery parents() Method

Example

Example

jQuery parentsUntil() Method

Example

Links

Tutorials

Connect with us