.parents()

Syntax

.parents([selector])

Parameters

selector (optional): A string containing a selector expression to match elements against

Return value

The new jQuery object.

Description

Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.

Examples

Get DIV parent count

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("span").click(function () {
                 var len = $("span").parents("div").length;
                 alert(len);
             });
        });
    </script>
  </head>
  <body>
    <body>
        <div>
          <div><span>Hello</span></div>
        </div>
  </body>
</html>

Click to view the demo

Get parents

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             var parentEls = $("span").parents()
                          .map(function () {
                                return this.tagName;
                              })
                          .get().join(", ");
             $("span").append(parentEls);
        });
    </script>
  </head>
  <body>
    <body>
       <div>
         <p>
          <span>
          </span>
         </p>
       </div>

  </body>
</html>

Click to view the demo

Click to find all unique div parent elements of each span.

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
    function showParents() {

              var len = $("span")
                               .parents("div")
                               .css("border", "2px red solid")
                               .length;
              $("b").text("Unique div parents: " + len);
            }
            $("span").click(function () {

              showParents();
            });
        });
    </script>
    <style>
      .selected { color:blue; }

    </style>

  </head>
  <body>
    <body>
        <div>
          <div><span>span</span></div>
          <span>span</span>
        </div>
        <div>
          <span>span</span>
        </div>
        <b></b>
    </body>
</html>

Click to view the demo