Quick Contact

    jQuery Traversing Ancestors

    Traversing Up the DOM Tree

    An ancestor in a logical relationship is a parent, grandparent, great-grandparent, and so forth.

    jQuery has helpful methods like parent(), parents(), and parentsUntil() that you can use to navigate up the DOM tree either one level at a time or multiple levels at once to quickly find the parent or other ancestors of an element in the hierarchy.

    jQuery parent() Method

    To determine the immediate parent of the chosen element, use the jQueryparent() method.

    The direct parent component of the < li>, which is the < ul>, will be highlighted by adding the class in the example below underline “document ready”.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Selecting the Direct Parent Element in jQuery< /title>
    < style>
        .highlight{
    background: skyblue;
        }        
    < /style>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("li").parent().addClass("highlight");
    });
    < /script>
    < /head>
    < body>
    < div class="container">
    < h1>Hello World< /h1>
    < p>This is a < em>simple paragraph< /em>.< /p>
    < ul>
    < li>Step 1< /li>
    < li>Step 2< /li>
    < /ul>
    < /div>
    < /body>
    < /html>
    

    jQuery parents() Method

    The ancestors of the selected element are obtained using the jQueryparents() method.

    The ancestor elements of the < li>, which are the < ul>, < div>, < body>, and the < html> components, will all have borders added to them in the example that follows.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Selecting All the Ancestor Elements in jQuery< /title>
    < style>
        *{
    margin: 10px;
        }
        .frame{
    border: 2px solid blue;
        }        
    < /style>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("li").parents().addClass("frame");
    });
    < /script>
    < /head>
    < body>
    < div class="container">
    < h1>Hello World< /h1>
    < p>This is a < em>simple paragraph< /em>.< /p>
    < ul>
    < li>Step 1< /li>
    < li>Step 2< /li>
    < /ul>
    < /div>
    < /body>
    < /html>
    

    When using the parents() method, you can optionally pass one or more selectors as parameters to narrow down your ancestor search. In the example below, all of the ancestors of the < li> that are < div> elements will have the border applied to them.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Selecting the Specific Ancestor Elements in jQuery< /title>
    < style>
        *{
    margin: 10px;
        }
        .frame{
    border: 2px solid blue;
        }        
    < /style>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("li").parents("div").addClass("frame");
    });
    < /script>
    < /head>
    < body>
    < div class="container">
    < h1>Hello World< /h1>
    < p>This is a < em>simple paragraph< /em>.< /p>
    < ul>
    < li>Step 2< /li>
    < li>Step 1< /li>
    < /ul>
    < /div>
    < /body>
    < /html>
    

    jQuery parentsUntil() Method

    To retrieve all the ancestors up to the element the selection matches but excluding, use the jQueryparentsUntil() function. Simply put, it retrieves all ancestor elements in the DOM hierarchy between two provided components.

    The example below will apply borders to all of the ancestor elements of the < li>, with the exception of the html element, i.e. the < ul>, < div>, and < body> elements.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Selecting All the Ancestors between Two Elements in jQuery< /title>
    < style>
        *{
    margin: 10px;
        }
        .frame{
    border: 2px solid blue;
        }
    < /style>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("li").parentsUntil("html").addClass("frame");
    });
    < /script>
    < /head>
    < body>
    < div class="container">
    < h1>Hello World< /h1>
    < p>This is a < em>simple paragraph< /em>.< /p>
    < ul>
    < li>Step 1< /li>
    < li>Step 2< /li>
    < /ul>
    < /div>
    < /body>
    < /html>
    

    Copyright 1999- Ducat Creative, All rights reserved.

    Anda bisa mendapatkan server slot online resmi dan terpercaya tentu saja di sini. Sebagai salah satu provider yang menyediakan banyak pilihan permainan.