Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Traversing Ancestoral elements using jquery methods with examples

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 203
    Comment on it

    There are three main methods which can be used to traverse a DOM while finding the ancestors of an element.Using jQuery's below mentioned methods we can traverse the DOM tree to the root while finding all the ancestors.

    1-) parent()

    2-) parents()

    3-) parentsUntil()


    1-) jQuery's parent() Method

    Example of parent() method: It returns the immediate parent of the selected element and traverses only a single level up the DOM tree.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .parent *{ 
        display: block;
        border:  1px solid lightgreen;
        padding: 4px;
        margin: 5px;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("span").parent().css({"border-radius": "10px"});
    });
    </script>
    </head>
    <body>
    
    <div class="parent">
      <div style="width:800px;"> 
      (I am the great-grandparent of span)
        <ul>(I am the grand parent of span)  
          <li>(I am the immediate parent of span)
            <span> span </span>
          </li>
        </ul>   
      </div>
    </div>
    </body>
    </html>

    In the above example the immediate parent of "span" is "li" and the border of the parent are made rounded.


    2-) jQuery parents() Method

    Example of jQuery's parents() method: All the ancestor elements till the root of the selected element are returned by jQuery's parents() method.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .grandparent * { 
        display: block;
        border: 1px solid blue;
        padding: 4px;
        margin: 10px;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("span").parents('ul').css({'border-radius':'10px','borderColor' : 'limegreen'});
        $("span").parent().css({'background-color': 'yellow'});  
        $("span").css({'background-color': 'white'});
    });
    </script>
    </head>
    <body>
    
    <div class="grandparent">
      <div style="width:800px;"> 
      (I am the great-grandparent of span)
        <ul>(I am the grand parent of span)  
          <li>(I am the immediate parent of span)
            <span> span </span>
          </li>
        </ul>   
      </div>
    </div>
    </body>
    </html>

    In the above example all the parents of "span" will have rounded corners and the border color will turn limegreen also the immediate parent background color will turn yellow.

    if we want to filter among all the parents we can us parameter for example in the above case we can use "ul" as a parameter to the parents() method :

    $("span").parents('ul').css({'border-radius':'10px','borderColor' : 'limegreen'});

    3-) jQuery parentsUntil() Method : This method returns all ancestoral elements between the two given arguments.

    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("span").parentsUntil("div").css({'border-radius':'10px','borderColor' : 'limegreen'});
    });
    </script>
    </head>
    <body>
    <div class="greatgrandparent">
      <div style="width:800px;"> 
      (I am the great-grandparent of span1 and span2)
        <ul>(I am the great-grandparent of span1 and span2)
        <ul>(I am the grandparent of span 1)
          <li>(I am the immediate parent of span 1)
    		  <span> span 1</span>
          </li>
         </ul>  
          <li>(I am the immediate parent of span 2)
            <span> span 2 </span>
          </li>
        </ul>   
      </div>
    </div>
    </body>
    </html>

    In the above example all the parents between the span and div element will have border-radus with 10px; and borderColor turned limegreen

    There are more jQuery method such as prev(), prevAll(), prevUntil() , siblings etc. which can be used to tranverse a DOM tree.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: