jQuery中find()和closest()的区别

在查看find()和最接近 ()之间的区别之前 方法，让我们简要了解这些是什么以及它们的作用。

1. find() 方法：该方法用于获取当前匹配元素集合中每个元素的所有过滤后的后代。

句法：

$(selector).find('filter-expression')

参数：用于过滤后代搜索的选择器表达式、元素或 jQuery 对象。

返回值：返回调用find()方法的元素的所有匹配后代。此方法遍历 DOM 一直到最后一个后代。这意味着它遍历所有级别到 DOM，例如子、孙、曾孙等。

示例：在下面的代码中，它将找到p标签内的所有span标签并将其颜色更改为蓝色。

HTML

 

    
    
    

 

     
Hello Geeks!
 
 
    
         
Hey! How are you
 
    
 
     
Hello Geeks
 
 
    
        $('p').find('span').css('color', 'blue')
    

 

输出：

2.closest()方法：该方法用于获取被选元素的第一个祖先。祖先可以是父母、祖父母、曾祖父母等。

句法：

$(selector).closest(filter-expression)

参数：用于过滤祖先搜索的选择器表达式、元素或 jQuery 对象。

示例：此方法一直遍历到文档的根元素，即 ，以查找所选元素的第一个祖先。我们有三层无序列表

标签。在
• 标签上调用closest()方法后，它返回第一个最近的
  标签。

  HTML

   
  
      
      
      
  
   
  
      
          one
          two
          
              three
              four
              
                  five
                  six
              
          
      
      
          $("#select-Me")
              .closest("ul")
              .css("color", "blue");
      
  
   

  输出：

  

  find() 和最近的() 之间的区别

  find()	closest()
  This method is used to get all the filtered descendants of each element in the current set of matched elements.	This method is used to get the first ancestor of the selected element.
  This method traverses the DOM all way down to the last descendant.	This method traverses the DOM all the way up to the document’s root element.
  This method goes down the tree looking into the child and child of the child.	This method goes up the tree looking into parents.
  Its syntax is -: $(selector).find(filter)	Its syntax is -: $(selector).closest(filter)
  It takes Parameter as a  filter expression	It takes parameter as a filter
  It is used to return the descendant elements of the selected element	It returns the first ancestor of the selected element.