Skip to content
Related Articles

Related Articles

JQuery | Get the n-th level parent of an element
  • Last Updated : 11 Jun, 2019

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.




<!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>

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.




<!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>

Output:

  • Before clicking the button:
  • After clicking the button:
My Personal Notes arrow_drop_up
Recommended Articles
Page :