parent() Method - Javascript jQuery Method and Property

Javascript examples for jQuery Method and Property:parent

  1. HOME
  2. Javascript
  3. jQuery Method and Property
  4. parent

Description

The parent() method returns the direct parent element of the selected element.

Syntax

Parameter Require Description
filterOptional.selector expression to narrow down the parent search

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * {/*from  w w w .  j  a v a 2 s  .  co m*/
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("span").parent("li").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>

<body class="ancestors">body (great-great-grandparent)
  <div style="width:500px;">div
    <ul>ul
      <li>li (direct parent)
        <span>span</span>
      </li>
      <li>li (direct parent)
        <span>span</span>
      </li>
    </ul>
  </div>
</body>

</html>

Related Tutorials