JQuery Ancestor Traversing

JQuery contains many functions that are used to select elements based on their relationship with the other elements. Traversing refers to the process of moving through all the associated elements selected via JQuery Traversing functions. This article explains JQuery Ancestor functions. Ancestor functions help select parent element of an element. There are three JQuery ancestor functions: parent(), parents() and parentsUntil().

Parent and Parents JQuery Ancestor Functions

Parent function selects the immediate parent of the element on the other hand parents function selects all the parents of the element until the root element. Take a look at the following example

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery Parent</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $("em").parent().css({"background-color": "yellow", "border": "2px dashed blue"});
         $("p").parent().css({"background-color": "grey", "border": "1px solid green"});
         $("h1").parents().css({"border": "1px solid green"});
  
         });
      </script>
    
</head>
    
<body>

    <div> This the outer most div</div>
    <div> <p>This is the second div paragraph. <em>This is insid em</em> This is again paragrpah.</p></div>
    
    <br/>
    <br/>
    <br/>
    
    <div>
        <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Orange</li>
            <li>Guava</li>
            <li><h1>Peach </h1></li>
        
        </u>
    </div>
    
    
    
</body>

</html>

Download Code Run Code

The above code contains an “em” element within a paragraph element which is further nested inside a div. JQuery parent() function selects the immediate parent of the “em” tag which is a paragraph element. The background color and border of the paragraph element is changed to show that it is selected via parent function.

Next, after some line breaks, an h1 element is created nested inside li, ul, and div elements. Calling parents() function on this h1 selects all the parent elements of h1 i.e. li, ul and div, body and html. The parents() function adds border to all parents of h1.

JQuery parentUntil function

The parentUntil() function selects all the parents of the element until the specified element is selected. The parentUntil() function limits the parents of the element. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery ParentUntil</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $("h1").parentsUntil("div").css({"border": "1px solid green"});
  
         });
      </script>
    
</head>
    
<body>
    
    <div>
        <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Orange</li>
            <li>Guava</li>
            <li><h1>Peach </h1></li>
        
        </u>
    </div>
    
    
    
</body>

</html>

Download Code Run Code

The above code utilizes JQuery parentsUntil() function to select all the parent of h1 element until the “div” parent element is traversed. This means that the elements selected will be li and ul.

<<< JQuery Remove ElementsJQuery Descendant Traversing >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .