jQuery | 最接近（）方法

介绍

closest() 是 jQuery 提供的一个方便的方法，用于查找匹配选择器的最接近的父级元素。它在 DOM 树中从当前元素自身开始向上遍历，直到找到一个匹配选择器的元素为止。该方法广泛应用于处理事件委托、查找特定元素或进行上下文相关操作等情况。

语法

$(selector).closest(selector)

• selector: 用于筛选最接近的父级元素的选择器表达式。

返回值

closest() 方法返回一个 jQuery 对象，包含满足筛选条件的最接近的父级元素。

示例

假设有以下 HTML 结构：

<div class="container">
  <div class="section">
    <h2>Title</h2>
    <button class="btn">Click Me</button>
  </div>
</div>

示例 1: 查找最接近的父级元素

$("button").closest(".container");

该代码会返回一个 jQuery 对象，包含最接近的 class 为 "container" 的父级元素。

示例 2: 查找最接近的父级元素并进行操作

$("button").closest(".container").css("background-color", "gray");

该代码会将最接近的 class 为 "container" 的父级元素的背景色设置为灰色。

示例 3: 事件委托

$(".container").on("click", ".btn", function() {
  // 针对按钮点击的处理逻辑
});

该代码会将点击事件绑定到最接近的 class 为 "container" 的父级元素上，当按钮被点击时触发处理逻辑。通过使用 closest() 方法，可以确保事件委托绑定到了正确的元素上，即使该元素后续被添加或移动。

总结

closest() 方法是 jQuery 提供的一个强大的工具，用于在 DOM 树中查找匹配选择器的最接近的父级元素。它的灵活性使其在处理事件委托、元素查找或上下文操作等方面非常实用。希望通过本文的介绍能够帮助程序员更好地理解和应用 closest() 方法。