jQuey Parent Method in ASP.NET

The jQuery parent() method is used to get the ancestors of each element in the DOM tree through the current set of matched elements.
  • 1676
Download Files:
 

As you know the terms parent, child, and sibling are used to describe the relationships. Parent nodes have children and children on the same level are called siblings. The jQuery parent() method is used to get the ancestors of each element in the DOM tree through the current set of matched elements.


This method optionally accepts a selector expression of same type which we pass to the
$() function. The elements will be filtered by testing whether they match it or not if the selector is supplied.

Example

Here is an example to find out all the unique div parent elements of each span.

<html>
<
head><title>jQuery Parent Selector</title>
 <style> 
    p, div, span {margin:2px; padding:1px; } 
    div { border:2px white solid; } 
    span { cursor:pointer; font-size:12px; }
    .selected { color:red; }
    b { color:blue; display:block; font-size:14px; } 
     .style1
     {
        color: #33CC33;
     }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</
head>
  <body style="background-color: #F7F7F7"> 
    <p>  
      <div style="font-family: Verdana; font-size: small">   
        <div><span>Hello!</span></div>
           <span>Welcome to vbdotnetheaven,</span>
      </div>
      <div style="font-family: Verdana; font-size: small">    
           <span>Share your ideas with us.</span>
      </div>
    </p>
      <b class="style1" 
         style="font-family: Verdana; font-size: small; font-weight: bold">Click on 
           each statement to toggle their parents.</b>
  <script>
     function showParents() {
        $("div").css("border-color", "white");
          var len = $("span.selected")
                           .parents("div")
                           .css("border", "2px blue solid")
                           .length;
          $("b").text("Number of unique div parents are: " + len);
        } 
        $("span").click(function () {
          $(this).toggleClass("selected"); 
          showParents();
     });
</script>
</
body>
</
html>

Output Result
parent1.gif

Now click on the first word to find out all unique div parent elements of each span.
 

parent2.gif

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.