jQuery closest() 方法

jQuery 中的 closest() 方法用于向上遍历 DOM 树，查找与指定选择器匹配的所选元素的最近祖先元素。

此方法从当前元素向上遍历 DOM 树，查找与选择器匹配的祖先元素。它返回第一个与选择器匹配的元素，从当前元素本身开始，然后向上移动。如果找不到匹配项，则遍历将一直持续到文档根。

即使多个元素与选择器匹配，也只返回遇到的第一个元素。

语法

以下是 jQuery 遍历 closest() 的语法：

$(selector).closest(filter)

参数

此方法接受以下参数：

filter: 选择每个选定元素的最近祖先元素，该祖先元素与指定的选择器匹配。

示例 1

在下面的示例中，我们演示了如何使用 closest() 方法在单击其内部的按钮时查找最近的祖先 <div> 元素：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var closestDiv = $(this).closest("div");
        closestDiv.css("background-color", "lightblue");
    });
});
</script>
<style>
    div {
        border: 1px solid black;
        padding: 10px;
        margin: 10px;
    }
</style>
</head>

<body>
<div>
    <p>This is the third div element.</p>
  <div>
    <p>This is the second div element.</p>
    <div>
      <p>This is the first div.</p>
      <button>Click to highlight closest div</button>
    </div>
  </div>
</div>
</body>
</html>

单击 <div> 内的按钮后，最近的祖先 <div> 将以浅蓝色背景颜色突出显示。

jquery_ref_traversing.htm

打印页面