Copyright © tutorialspoint.com

# jQuery - parents( [selector] ) Method

# Description:

The parents( [selector] ) method gets a set of elements containing the unique ancestors of the matched set of elements except for the root element.

# Syntax:

Here is the simple syntax to use this method:

    selector.parents( [selector] )

## Parameters:

Here is the description of all the parameters used by this method:

- selector: This is optional selector to filter the ancestors with.

# Example:

Following is a simple example a simple showing the usage of this method. Try this example by passing parent selector like ".top".

    <html>
    <head>
    <title>the title</title>
       <script type="text/javascript"
       src="/jquery/jquery-1.3.2.min.js"></script>
       <script type="text/javascript" language="javascript">

         $(document).ready(function(){
           var parentEls = $("p").parents()
                                 .map(function () {
                                       return this.tagName;
                                 }).get().join(", ");
            $("b").append("<strong>" + parentEls + "</strong>");
         });

      </script>
      <style>
          .hilight { background:yellow; }
      </style>

    </head>
    <body>
          <scan>Top Element</scan>
         <div>
            <div class="top">Top division
                <p class="first">First Sibling</p>
                <scan>Second sibling</scan>
                <p class="third">Third sibling</p>
            </div>
           <b>My parents are: </b>
        <div>
    </body>
    </html>

This would generate following result.

    <html>
    <head>
    <title>the title</title>
       <script type="text/javascript"
       src="/jquery/jquery-1.3.2.min.js"></script>
       <script type="text/javascript" language="javascript">

         $(document).ready(function(){
           var parentEls = $("p").parents()
                                 .map(function () {
                                       return this.tagName;
                                 }).get().join(", ");
            $("b").append("<strong>" + parentEls + "</strong>");
         });

      </script>
      <style>
          .hilight { background:yellow; }
      </style>

    </head>
    <body>
          <scan>Top Element</scan>
         <div>
            <div class="top">Top division
                <p class="first">First Sibling</p>
                <scan>Second sibling</scan>
                <p class="third">Third sibling</p>
            </div>
           <b>My parents are: DIV, DIV, BODY, HTML</b>
        <div>
    </body>
    </html>

To understand it in better way you can Try it yourself.

Copyright © tutorialspoint.com