JQuery | Get the n-th level parent of an element

Given an element from DOM, The task is to find the n-th level parent of that element using JQuery. Below few of the methods are discussed:

  • jQuery on() Method:
    This method adds one or more event handlers for the selected elements and child elements.

    Syntax:



    $(selector).on(event, childSel, data, fun, map)
    

    Parameters:

    • event: This parameter is required. It specifies one or more then one event(s) or namespaces to add to the selected elements.
      If there are multiple event values, separate them by space. Event must be a valid.
    • childSel: This parameter is optional. It specifies that the event handler should only be attached to the defined child elements.
    • data: This parameter is optional. It specifies additional data to pass to the function.
    • fun: This parameter is required. It specifies the function to run when the event occurs.
    • map: It specifies an event map ({event:func(), event:func(), …}) having one or more event to add to the selected elements, and functions to run when the events happens.
  • jQuery parents() Method:
    This is an inbuilt method in jQuery and is used to find the all parent elements related to the selected element. This method traverse all the levels up the selected element and return that all elements.

    Syntax:

    $(selector).parents()
    

    Return Value:
    It returns the all parents of the selected element.

  • jQuery eq() Method:
    This method returns an element with a passed index number of the matched elements.
    The index start from 0.

    Syntax:

    $(selector).eq(index)
    

    Parameter:

    • index: This parameter is required. It specifies the index of the element. Accepts positive or negative number.

Example 1: This example uses the parents() and eq() method to find the 0th level parent of class=’child’ element which is a <div> element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JQuery | Get the n-th level parent of an element.
    </title>
</head>
<script src=
</script>
  
<body style="text-align:center;" id="body">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP" 
       style="font-size: 17px; font-weight: bold;">
    </p>
    <div class="parent">
        <div class="child">
            child
        </div>
    </div>
    <br>
    <button>
        click here
    </button>
    <p id="GFG_DOWN" 
       style="color: green;
              font-size: 24px;
              font-weight: bold;">
    </p>
    <script>
        $('#GFG_UP').text('Click on the button to see result');
        $('button').on('click', function() {
            $('.child').parents().eq(0).css({
                "color": "green",
                "border": "2px solid green"
            });
            $('#GFG_DOWN').text(
              "Border drawn around the first parent "+
              "of element with class = 'child'");
        });
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking the button:
  • After clicking the button:

Example 2: This example uses the parents() and eq() method to find the 2nd level parent of class=’child’ element which is a <body> element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JQuery| Get the n-th level parent of an element.
    </title>
</head>
<script src=
</script>
  
<body style="text-align:center;" id="body">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP"
       style="font-size: 17px; font-weight: bold;">
    </p>
    <div class="parent">
        <div class="child">
            child
        </div>
    </div>
    <br>
    <button>
        click here
    </button>
    <p id="GFG_DOWN" 
       style="color: green; 
              font-size: 24px;
              font-weight: bold;">
    </p>
    <script>
        $('#GFG_UP').text('Click on the button to see result');
        $('button').on('click', function() {
            $('.child').parents().eq(2).css({
                "border": "2px solid green"
            });
            $('#GFG_DOWN').text(
              "Border drawn around the third parent "+
              "of element with class = 'child'");
        });
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking the button:
  • After clicking the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.