jQuery parent() vs. parents()

jQuery parent() method selects one element up the DOM tree. While jQuery parents() method travels up from the parent element and selects all the matching elements up to the document's root element .

jQuery parent() method

The parent() method traverses only one level up the HTML DOM tree . The optional parameters provide additional filtering options to narrow down the traversal.

example

 
$("p").parent().css({"color": "blue"});

 
<ul>
  <li>Red</li>
  <li><p>Blue</p></li>
  <li>Green</li>
</ul>

Try it Yourself

Red
Blue
Green

Full Source

 
<html>
<head>
<title>jQuery parent() example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").parent().css({"color": "blue"});
});
</script>
</head>
<body>
  <ul>
    <li>Red</li>
    <li><p>Blue</p></li>
    <li>Green</li>
  </ul>
</body>
</html>

jQuery parents() method

The parents() method is used to find all the parent elements related to the selected element. This method traverse all the levels up the selected element and return that all elements .

example

 
$("p").parents().css({"color": "red"});

 
<ul>
  <li>Red</li>
  <li><p style="color:blue;">Blue</p></li>
  <li>Green</li>
</ul>

Full Source

 
<html>
<head>
<title>jQuery parents() example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").parents().css({"color": "red"});
});
</script>
</head>
<body>
  <ul>
    <li>Red</li>
    <li><p style="color:blue;">Blue</p></li>
    <li>Green</li>
  </ul>
</body>
</html>

Next : What does jQuery data() function do?