本篇内容介绍了“jquery中的closest方法如何用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
在jquery中，closest方法用于返回被选元素的第一个祖先元素；该函数可从元素本身开始逐级向上匹配，并且返回最先匹配的元素，若没有匹配到则返回一个空的jQuery对象，语法为“元素对象.closest(匹配元素的选择器表达式)”。
本教程操作环境：windows10系统、jquery3.2.1版本、Dell G3电脑。
closest() 方法返回被选元素的第一个祖先元素。
祖先是父、祖父、曾祖父，依此类推。
从当前元素开始，沿 DOM 树向上遍历，并返回匹配所传递的表达式的第一个单一祖先，返回包含零个或一个元素的 jQuery 对象
closest()函数会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。
语法为：
返回被选元素的第一个祖先元素：
$(selector).closest(filter)
返回使用 DOM context 查找的 DOM 树中的第一个祖先元素：
$(selector).closest(filter,context)
filter 必需。规定缩小搜索祖先元素范围的选择器表达式、元素或 jQuery 对象。
context 可选。在其内可以找到匹配元素的 DOM 元素。
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
.ancestors *{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("span").closest("ul").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="ancestors">body (曾曾祖先节点)
<div style="width:500px;">div (曾祖先节点)
<ul>ul (第二祖先 - 第二祖先节点)
<ul>ul (第一祖先 - 第一祖先节点)
<li>li (直接父节点)
<span>span</span>
</li>
</ul>
</ul>
</div>
</body>
<!-- 在这个例子中, $("span").closest("ul") 指我们查找一个span元素的第一个ul祖先。最靠近span的祖先是li,但是由于查到一个div，jQuery 跳过li元素继续查找下一个祖先，直到它找出我们要查找的ul.假如我们用parents() 方法替代，它将返回ul的祖先 。 -->
</html>输出结果：
“jquery中的closest方法如何用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
