jQuery closest() 方法

jQuery 中的 closest() 方法选择给定选择器的第一个祖先元素。祖先可以是父元素、祖父元素等。它是 jQuery 中的内置方法。为了查找第一个祖先，closest() 方法从当前元素向上遍历。如果它不匹配，搜索将逐级向上进行，直到找到与指定表达式匹配的元素。此方法返回所选元素的第一个祖先。

它类似于 parents() 方法，因为两者都向上遍历 DOM 树。parents() 方法从父元素开始，并返回所有与指定表达式匹配的祖先。与 parents() 方法不同，closest() 方法从当前元素开始，并返回与指定表达式匹配的第一个祖先。

语法

返回第一个祖先

使用 DOM 上下文返回第一个祖先

closest() 方法的参数值定义如下

参数值

selector：这是必需参数，指定选择器表达式、元素或 jQuery 对象。此值会过滤元素并缩小祖先搜索范围。

context：这是一个 DOM 元素，在其中可以找到匹配元素。它是可选的。

让我们通过一些示例来理解 closest() 方法。

示例 1

在此示例中，我们没有使用 context 参数，即我们没有传递 DOM 上下文。这里有两个 div 元素以及一个 ul 元素、一个标题 h2 和一个段落元素。

我们正在寻找段落元素的第一个 div 祖先。尽管段落的最近祖先是 h2，但由于我们正在查找 div，因此 h2 元素被跳过，搜索在下一个祖先上进行，并且会一直持续到找到指定的元素。我们必须单击给定按钮才能获取段落元素的第一个祖先。

如果我们使用 parents() 方法而不是 closest() 方法，它将返回两个 div 祖先。

输出

执行上述代码后，输出将是 -

单击给定按钮后，输出为 -

示例 2

在此示例中，我们正在传递 DOM 上下文。这意味着搜索是在 DOM 上下文内完成的。这里有两个 div 元素。第一个 div 元素的 ID 是 demo。我们使用此 div 作为上下文，并寻找段落元素的第一个 div 祖先。单击按钮后，第二个 div 将被突出显示为段落的第一个祖先，因为它属于上下文。

如果 ul 元素的 ID 是 demo，它是 div 的子元素，那么 div 元素将不会被突出显示，因为在这种情况下，相应的 div 元素在上下文之外。

输出

执行上述代码后，输出将是 -

单击给定按钮后，输出为 -