📅 最后修改于: 2023-12-03 15:32:12.772000 🧑 作者: Mango
closest() 是 jQuery 中最接近() 的方法。该方法沿着 DOM 树向上遍历，查找最接近的匹配元素，该匹配元素可以是当前元素本身，也可以是当前元素的直接或间接父元素、祖先元素。
$(selector).closest(filter)
selector：要查找的元素。filter：一个可选参数，用于过滤查找出的元素。它可以是一个选择器字符串，一个 DOM 元素或一个 jQuery 对象。closest() 方法返回从当前元素开始沿 DOM 树遍历的匹配元素集合。如果没有匹配的元素，则返回一个空 jQuery 对象，而不是 null。
以下示例演示了如何使用 closest() 方法查找最接近的匹配元素：
<!DOCTYPE html>
<html>
<head>
<title>jQuery closest() 方法示例</title>
<script src="https://cdn.jsdelivr.net/jquery/3.5.1/jquery.min.js"></script>
<style>
div {
padding: 10px;
border: 1px solid black;
margin: 5px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div>
<h2 class="hello">Hello World!</h2>
<p class="greeting">Welcome to my website!</p>
<div>
<p class="description">This is a demo page.</p>
<button>Click Me</button>
</div>
</div>
<script>
// 查找匹配元素中最接近的祖先元素
$('.description').closest('div').css('background-color', 'lightgreen');
// 查找匹配元素中最接近的祖先元素，并将该元素以及其后代元素隐藏
$('button').closest('div').addClass('hidden');
// 查找匹配元素中最接近的祖先元素，并将该元素以及其兄弟元素隐藏
$('button').closest('div').siblings().addClass('hidden');
</script>
</body>
</html>
在上面的示例中：
$('.description').closest('div').css('background-color', 'lightgreen') 查找匹配元素中最接近的祖先元素，并将其背景色设置为淡绿色。$('button').closest('div').addClass('hidden') 查找匹配元素中最接近的祖先元素，并将其以及其后代元素隐藏。$('button').closest('div').siblings().addClass('hidden') 查找匹配元素中最接近的祖先元素，并将其以及其兄弟元素隐藏。