.parent()

Syntax

.parent([selector])

Parameters

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

Return value

The new jQuery object.

Description

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

Examples

Get form input parent

 
<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 input = $(":submit").parent().css({background:"yellow", border:"3px red solid"});
       $('#result').text('jQuery matched ' + input.length + ' elements.');
    });
    </script>
  </head>
  <body>
     <form><input type="submit" /></form>
     <div id="result"></div>
  </body>
</html>

Click to view the demo

Get parent with certain class

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("p").parent(".selected").css("background", "yellow");
        });
    </script>
    <style>
      .y { background:yellow; }
  </style>
  </head>
  <body>
    <body>
       <div><span class="selected">asdf</p></span>
            <span>asdf</span>
       </div>
  </body>
</html>

Click to view the demo

parent of the input is a form element

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            alert( $(":checkbox").parent().is("form"));
        });
    </script>
  </head>
  <body>
    <body>
          <form><input type="checkbox" /></form>
    </body>
</html>

Click to view the demo

filter the set of parent elements

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                 $("*", document.body).each(function () {
                      var parentTag = $(this).parent().get(0).tagName;
                      $(this).prepend(document.createTextNode(parentTag + " > "));
                 });
        });
    </script>
  </head>
  <body>
    <body>
          <p>p</p>
          <div>div</div>
          <p>p</p>
          <p>p</p>
          <div>div</div>
          <p>p</p>
          <div>div</div>

    </body>
</html>

Click to view the demo

Shows the parent of each element as (parent > child). Check the View Source to see the raw html.

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                 $("*", document.body).each(function () {
                      var parentTag = $(this).parent().get(0).tagName;
                      $(this).prepend(document.createTextNode(parentTag + " > "));
                 });
        });
    </script>
  </head>
  <body>
    <body>
          <p>p</p>
          <div>div</div>
          <p>p</p>
          <p>p</p>
          <div>div</div>
          <p>p</p>
          <div>div</div>

    </body>
</html>

Click to view the demo