jQuery 中的 parent() 和 parents() 方法有什么区别？

jQuery parent() 和 parents() 方法返回作为 DOM 祖先的元素。它在 DOM 中向上遍历以查找祖先。

在本文中，我们将了解parent()和parents()方法之间的区别。

parent() 方法： parent()方法仅遍历 DOM 之前的一级，并使用 jQuery 返回作为所选元素的直接父级或最近的第一个祖先的元素。

句法：

$('selector').parent();

示例 1：

HTML

(ancestor-6 )

  

    
    
    
      
    
    
   
    
        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;
        }
    

  
    
    Geeks For Geeks(ancestor-5)
    
      DIV-1(ancestor-4)
       
        DIV-2(ancestor-3)
        
            DIV-3(ancestor-2)
             
                DIV-4 Direct parent of p(ancestor-1)
                
                  This is geeks for geeks(Click 
                  Me to find direct parent)
                
            
          
      
     
  
    
      $('p').click(function(){
        $('p').parent().addClass('bg-blue');
      });
    

  

输出：

直系父母

如果我们观察到这一点，类 ‘ bg-blue ‘ 被添加到 p的直接父级，即DIV-4并将背景颜色更改为蓝色，因为p具有白色背景颜色，它保持白色。

示例 2：以下代码还以绿色显示子元素的父元素。

HTML

  

    
    
    
    Geeks for Geeks
    
    
    
        h2 {
            color: #006600;
        }
  
        button {
            color: white;
            background-color: #006600;
            width: 100px;
            height: 30px;
        }
  
        #sublist2 {
            color: red;
        }
    

  

    GeeksforGeeks
  
    
        
            
                GrandParent
                
                    one
                    two
                    three
                
            
            
                Parent
                
                    three
                    four
                    five
                    
                         Child
                        six
                        seven
                        eight
                    
                
            
        
    
  
    
        $('ol#sublist2').parent().css('color', 'green');
    

  

输出：绿色有序列表是子元素的父元素。

parent() 方法： parents()方法遍历DOM 中高于被选元素的所有层级，并使用jQuery 返回所有被选元素的祖先元素。

句法：

$('selector').parents();

示例 1：

HTML

(ancestor-6 )

  

    
    
    
    
    
    
    
        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;
        }
    

  

      
    Geeks For Geeks(ancestor-5)
    
      DIV-1(ancestor-4)
       
        DIV-2(ancestor-3)
        
            DIV-3(ancestor-2)
             
                DIV-4 Direct parent of p(ancestor-1)
                
                  This is geeks for geeks(Click Me to find all 
                  ancestors of p tag)
                
  
            
          
      
     
  
    
      $('p').click(function()
      {
         $('p').parents().addClass('bg-blue');
      });
    

输出：

所有祖先

如果我们观察到这一点，类‘bg-blue ‘ 被添加到p 的所有祖先，即DIV-4、DIV-3、DIV-2、DIV-1、h1、HTML标签，并将背景颜色更改为蓝色，因为p有一个白色的背景色，它仍然是白色的。

示例 2：

HTML

  

    
    
    
  
    
    
    
    
        h2 {
            color: #006600;
        }
  
        button {
            color: white;
            background-color: #006600;
            width: 100px;
            height: 30px;
        }
  
        #sublist2 {
            color: red;
        }
    

  

    GeeksforGeeks
  
    
        
            
                GrandParent
                
                    one
                    two
                    three
                
            
            
                Parent
                
                    three
                    four
                    five
                    
                         Child
                        six
                        seven
                        eight
  
                    
                
            
        
    
  
    
        $('ol#sublist2').parents().css('color', 'green');
    
  

  

输出：所有绿色有序列表都是子元素的父元素。

parent() 和 parents() 方法之间的区别：

parent() Method	parents() 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