ARTICLE

How to use jQuey Parent Method in ASP.NET

Posted by Sapna in Articles | ASP.NET using VB.NET on March 01, 2011

Tags: jQuery, jQuery Articles, jQuery in ASP.NET, jQuery Parent Method, jQuery Tutorial

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

Download Files:

jQueryParent.zip

Reader Level: Beginner

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>