Skip to content
Related Articles

Related Articles

Improve Article

What is the difference between parent() and parents() methods in jQuery ?

  • Last Updated : 22 Jul, 2021

The jQuery parent() and parents() methods return the elements which are ancestors of the DOM. It traverses upwards in the DOM for finding ancestors. 

In this article, we will learn about the difference between parent() and parents() methods.

parent() Method: The parent() method traverse only one level before the DOM and returns the element that is the direct parent or nearest 1st ancestor of the selected element using jQuery.

Syntax:

$('selector').parent();

 



Example 1: 

HTML




<!DOCTYPE html>
(ancestor-6 )
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
      
    <!-- Including jQuery  -->
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
            crossorigin="anonymous">
   </script>
    <style>
        h1 {
            color: #006600;
        }
  
        body {
            text-align: center;
        }
  
        div {
            text-align: center;
            padding: 5px;
            border: 2px solid black;
            border-radius: 5px;
            margin: 5px;
        }       
        p{
            border: 2px solid black;
            margin: 2px;
            padding: 5px;
            background-color: white;
        }
        /* The class that turns the div's 
           background colour to red */
        .bg-blue {
            background-color: blue;
        }
    </style>
</head>
  
<body>    
    <h1>Geeks For Geeks(ancestor-5)</h1>
    <div>
      DIV-1(ancestor-4)
      <div
        DIV-2(ancestor-3)
        <div>
            DIV-3(ancestor-2)
            <div
                DIV-4 Direct parent of p(ancestor-1)
                <p id= 'btn'>
                  This is geeks for geeks(Click 
                  Me to find direct parent)
                </p>
            </div>
          </div>
      </div>
     </div>
  
    <script>
      $('p').click(function(){
        $('p').parent().addClass('bg-blue');
      });
    </script>
</body>
  
</html>

Output:

Direct Parent 

If we observe this, the class ‘bg-blue‘ is added to the direct parent of p that is DIV-4 and change the background colour to blue as p has a white background colour, it remained white.

Example 2: The following code also shows the parent elements in green color for the child elements.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Geeks for Geeks</title>
    <!-- Including jQuery  -->
        letegrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous"></script>
    <style>
        h2 {
            color: #006600;
        }
  
        button {
            color: white;
            background-color: #006600;
            width: 100px;
            height: 30px;
        }
  
        #sublist2 {
            color: red;
        }
    </style>
</head>
  
<body>
    <h2>GeeksforGeeks</h2>
  
    <div>
        <ul id="list1">
            <li>
                GrandParent
                <ol id="sublist1">
                    <li>one</li>
                    <li>two</li>
                    <li>three</li>
                </ol>
            </li>
            <li>
                Parent
                <ol>
                    <li>three</li>
                    <li>four</li>
                    <li>five</li>
                    <ol id="sublist2">
                        <li> Child</li>
                        <li>six</li>
                        <li>seven</li>
                        <li>eight</li>
                    </ol>
                </ol>
            </li>
        </ul>
    </div>
  
    <script>
        $('ol#sublist2').parent().css('color', 'green');
    </script>
</body>
  
</html>

Output: The green color ordered list is the parent element for the child elements.

 



parents() Method: The parents() method traverse all the levels of elements upper than the selected element in the DOM and returns all the element that are ancestors of the selected element using jQuery.

Syntax:

$('selector').parents();

Example 1:

HTML




<!DOCTYPE html>
(ancestor-6 )
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <!-- Including jQuery  -->
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous">
    </script>
    <style>
        h1 {
            color: #006600;
        }
  
        body {
            text-align: center;
        }
  
        div {
            text-align: center;
            padding: 5px;
            border: 2px solid black;
            border-radius: 5px;
            margin: 5px;
        }       
        p{
            border: 2px solid black;
            margin: 2px;
            padding: 5px;
            background-color: white;
        }
        /* The class that turns the div's background colour to red */
        .bg-blue {
            background-color: blue;
        }
    </style>
</head>
  
<body>
      
    <h1>Geeks For Geeks(ancestor-5)</h1>
    <div>
      DIV-1(ancestor-4)
      <div
        DIV-2(ancestor-3)
        <div>
            DIV-3(ancestor-2)
            <div
                DIV-4 Direct parent of p(ancestor-1)
                <p id= 'btn'>
                  This is geeks for geeks(Click Me to find all 
                  ancestors of p tag)
                </p>
  
            </div>
          </div>
      </div>
     </div>
  
    <script>
      $('p').click(function()
      {
         $('p').parents().addClass('bg-blue');
      });
    </script>
</body>
</html>

Output:

All ancestors

If we observe this, the class ‘bg-blue‘ is added to all the ancestors of p that is DIV-4, DIV-3, DIV-2, DIV-1,h1, HTML tag and change the background color to blue since p has a white background color, it remained white.

Example 2:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
         content="width=device-width, initial-scale=1.0">
  
    <!-- Including jQuery  -->
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
            crossorigin="anonymous">
    </script>
    <style>
        h2 {
            color: #006600;
        }
  
        button {
            color: white;
            background-color: #006600;
            width: 100px;
            height: 30px;
        }
  
        #sublist2 {
            color: red;
        }
    </style>
</head>
  
<body>
    <h2>GeeksforGeeks</h2>
  
    <div>
        <ul id="list1">
            <li>
                GrandParent
                <ol id="sublist1">
                    <li>one</li>
                    <li>two</li>
                    <li>three</li>
                </ol>
            </li>
            <li>
                Parent
                <ol>
                    <li>three</li>
                    <li>four</li>
                    <li>five</li>
                    <ol id="sublist2">
                        <li> Child</li>
                        <li>six</li>
                        <li>seven</li>
                        <li>eight</li>
  
                    </ol>
                </ol>
            </li>
        </ul>
    </div>
  
    <script>
        $('ol#sublist2').parents().css('color', 'green');
    </script>
  
</body>
  
</html>

Output: All the green-colored ordered lists are the parents for the child elements.

difference between parent() and parents() methods:

parent() Methodparents() Method
It only traverses one level up 
in the DOM of the selected element.
It traverses all levels up in the DOM of the 
selected element until the root i.e HTML tag.
It returns only an element that is 
the direct parent.
It returns all elements that are ancestors to the 
selected element



My Personal Notes arrow_drop_up
Recommended Articles
Page :