使用jQuery进行遍历

find() 和 filter() 方法之间的区别

filter() 方法用于过滤包装器集中包含的当前元素集。它的使用应该留给需要过滤一组已选择的元素的任务。例如，下面的代码将过滤包装集中包含的三个

元素。

    
first
    
middle
    
last
      (function ($) {  // Alerts middle, by filtering out the first      // and last 
 elements in the wrapper set.      alert($('p').filter(':not(:first):not(:last)').text());  })(jQuery); 

登录后复制

注意：当使用 filter() 时，总是问自己是否绝对有必要。例如， $(‘p’).filter(‘:not(:first):not(:last)’) 可以不写 filter()$(‘p:not(:first) :not(:last)’)。

另一方面，find() 方法可用于进一步查找当前所选元素的后代。认为 find() 更像是使用封装在已选择的元素中的新元素来更新或更改当前的包装集。例如，下面的代码将使用 find() 将包装集从

元素更改为两个 元素。

    
first
    
middle
    
last
      (function ($) {      // Alerts "strong"      alert($('p').find('strong').get(0).nodeName);  })(jQuery); 

登录后复制

注意：实际上，您可以使用 andSelf() 将使用 find() 方法之前的包装器中的元素与当前元素组合起来 – 例如$(‘p’).find(‘strong’).andSelf().

要带走的概念是 filter() 只会减少（或过滤）包装器集中当前选定的元素，而 find() 实际上可以创建一组全新的包装元素。

注意： find() 和 filter() 都是破坏性方法，可以使用 end() 撤消，这会将包装的集合恢复为使用 find() 或 filter() 之前的状态。

向 filter() 传递函数而不是表达式

在运行并创建用于选择元素的自定义过滤器之前，简单地向遍历 filter() 方法传递一个函数可能更有意义，该函数允许您检查包装器集中的每个元素的特定值场景。

例如，假设您希望将 HTML 页面中的所有 元素包装在当前未使用该元素包装的

元素中。

您可以创建一个自定义过滤器来完成此任务，或者您可以使用 filter() 方法，向其传递一个函数，该函数将确定该元素的父元素是否为

元素，如果否，则在使用

元素包装集合中剩余的 元素之前，从集合中删除该元素。

在下面的示例中，我选择 HTML 页面中的每个 元素，然后向 filter() 方法传递一个用于迭代每个元素的函数（使用 this ) 在包装器集中，检查 元素的父元素是否为

元素。

    
        
    
        
      (function ($) {      $('img').attr('src', 'D:pic/2025-03-07/https://cdn.chuangxiangniao.com/2025/03/20250308104130754.gif').filter(function () { return !$(this).parent('p').length == 1 }).wrap('
');  })(jQuery); 

登录后复制

请注意，我正在使用 ! 运算符将布尔值 true 更改为 false。这是因为我想从以

元素作为父元素的集合中删除 元素。如果函数返回 false，则传递给 filter() 方法的函数只会从集合中删除元素。

要点是，如果您正在处理孤立的情况，请创建自定义过滤器 – 例如:findImgWithNoP – 对于单一情况可以通过简单地向filter方法传递一个可以进行自定义过滤的函数来避免。这个概念非常强大。考虑一下当我们将正则表达式测试与 filter() 方法结合使用时可能发生什么。

登录后复制jQuery is great. It’s lightweight. Its free! jQuery makes everything simple. (function($){ // Wrap a element around any text within // a

    
        
            
                
            
        
    
       (function ($) {      // Alerts "parent0" x4      alert($('#start').parent().attr('id'));      alert($('#start').parents('#parent0').attr('id'));      alert($('#start').parents()[0].id);      // Gets actual DOM element      alert($('#start').closest('#parent0').attr('id'));      // Alerts "parent1" x4      alert($('#start').parent().parent().attr('id'));      alert($('#start').parents('#parent1').attr('id'));      alert($('#start').parents()[1].id);      // Gets actual DOM element      alert($('#start').closest('#parent1').attr('id'));      // Alerts "parent2" x4      alert($('#start').parent().parent().parent().attr('id'));      alert($('#start').parents('#parent2').attr('id'));      alert($('#start').parents()[2].id);      // Gets actual DOM element      alert($('#start').closest('#parent2').attr('id'));  })(jQuery);