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

📅  最后修改于: 2022-05-13 01:56:01.561000             🧑  作者: Mango

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

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

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

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

句法:

$('selector').parent();



示例 1:

HTML

(ancestor-6 )

  

    
    
    
      
    
    
    

  
    
    

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)                 

            
          
      
     
          


HTML


  

    
    
    
    Geeks for Geeks
    
    
    

  

    

GeeksforGeeks

       
        
                
  •                 GrandParent                 
                          
    1. one
    2.                     
    3. two
    4.                     
    5. three
    6.                 
                
  •             
  •                 Parent                 
                          
    1. three
    2.                     
    3. four
    4.                     
    5. five
    6.                     
                                
      1. Child
      2.                         
      3. six
      4.                         
      5. seven
      6.                         
      7. eight
      8.                     
                      
                
  •         
    
          


HTML

(ancestor-6 )

  

    
    
    
    
    
    

  

      
    

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)                 

               
          
      
     
       


HTML


  

    
    
    
  
    
    
    

  

    

GeeksforGeeks

       
        
                
  •                 GrandParent                 
                          
    1. one
    2.                     
    3. two
    4.                     
    5. three
    6.                 
                
  •             
  •                 Parent                 
                          
    1. three
    2.                     
    3. four
    4.                     
    5. five
    6.                     
                                
      1. Child
      2.                         
      3. six
      4.                         
      5. seven
      6.                         
      7. eight
      8.                        
                      
                
  •         
    
             


输出:

直系父母

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

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

HTML



  

    
    
    
    Geeks for Geeks
    
    
    

  

    

GeeksforGeeks

       
        
                
  •                 GrandParent                 
                          
    1. one
    2.                     
    3. two
    4.                     
    5. three
    6.                 
                
  •             
  •                 Parent                 
                          
    1. three
    2.                     
    3. four
    4.                     
    5. five
    6.                     
                                
      1. Child
      2.                         
      3. six
      4.                         
      5. seven
      6.                         
      7. eight
      8.                     
                      
                
  •         
    
          

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



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

句法:

$('selector').parents();

示例 1:

HTML


(ancestor-6 )

  

    
    
    
    
    
    

  

      
    

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)                 

               
          
      
     
       

输出:

所有祖先

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

示例 2:

HTML



  

    
    
    
  
    
    
    

  

    

GeeksforGeeks

       
        
                
  •                 GrandParent                 
                          
    1. one
    2.                     
    3. two
    4.                     
    5. three
    6.                 
                
  •             
  •                 Parent                 
                          
    1. three
    2.                     
    3. four
    4.                     
    5. five
    6.                     
                                
      1. Child
      2.                         
      3. six
      4.                         
      5. seven
      6.                         
      7. eight
      8.                        
                      
                
  •         
    
             

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

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

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