使用jQuery进行遍历

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

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

    
first
    
middle
    
last
    
    

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

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

    
first
    
middle
    
last
    
    

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

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

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

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

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

Notion AI

Notion是一款集成了笔记、知识库、数据表格、看板、日历等多种能力于一体的应用程序，它既可供个人使用，也可以与他人进行跨平台协作。

下载

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

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

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

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

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

    

        
jQuery is great.
        
It's lightweight.
        
Its free!
        
jQuery makes everything simple.
    
    
    

向上遍历 DOM

您可以使用 parent()、parents() 和 closest() 方法轻松遍历 DOM 到祖先元素。了解这些方法之间的差异至关重要。检查下面的代码并确保您了解这些 jQuery 遍历方法之间的差异。

注意： closest() 和 parents() 可能看起来具有相同的功能，但 closest() 实际上会在其过滤中包含当前选定的元素.

closest() 一旦找到匹配项就会停止遍历，而 parents() 会获取所有父级，然后过滤您的可选选择器。因此，closest() 最多只能返回一个元素。

遍历方法接受 CSS 表达式作为可选参数

CSS 表达式不仅可以传递给 jQuery 函数来选择元素，还可以传递给多个遍历方法。可能很容易忘记这一点，因为许多遍历方法的功能根本不需要使用任何表达式 - 例如next().对于以下遍历方法，表达式是可选的，但请记住，您可以选择提供用于过滤的表达式。

• children('表达式')
• next('表达式')
• nextAll('表达式')
• parent('表达式')
• 父母（'表达'）
• prev('表达式')
• prevAll('表达式')
• siblings('表达式')
• closest('表达式')