jquery中closest的用法
前些天在做前端移动端遇到tab选项卡中别人写代码用到closest，不知道什么意思，于是查了下手册，意思写得很抽象，于是我便自己做一个测试，基本理解他的含义，现在分享给大家。
工具/原料
jquery.js
Hbuider
方法/步骤
第一步 引入jquey,写入demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul,li,span{
display: block;
border: 2px solid black;
color: black;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<ul>ul (第一祖先 - 第一祖先节点)
<li>li (直接父节点)
<span>span</span>
</li>
</ul>
<script src="../../js/jquery.js"></script>
<script>
$(function(){
$("span").closest("li").css({"color":"red","border":"2px solid red"});
});</script>
</body>
</html>
在这里我们发现li的颜色变红了
第二步 我们把closest("li")改成closest("ul")
$("span").closest("ul").css({"color":"red","border":"2px solid red"});
我们会发现只有ul变红了
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul,li,span{
display: block;
border: 2px solid black;
color: black;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<ul>ul (第一祖先 - 第一祖先节点)
<li>li (直接父节点)
<span>span</span>
</li>
</ul>
<script src="../../js/jquery.js"></script>
<script> $(function(){
$("span").closest("ul").css({"color":"red","border":"2px solid red"});
});</script>
</body>
</html>
第三步 我们在li加入一个li元素，代码改成原来试一试
这时，我们会发现这个
<ul>ul (第一祖先 - 第一祖先节点)
<li>li (直接父节点)
<span>span</span>
</li>
<li>北京</li>
</ul>
结构中只有紧挨这个span的li变红
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul,li,span{
display: block;
border: 2px solid black;
color: black;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<ul>ul (第一祖先 - 第一祖先节点)
<li>li (直接父节点)
<span>span</span>
</li>
<li>北京</li>
</ul>
<script src="../../js/jquery.js"></script>
<script> $(function(){
$("span").closest("li").css({"color":"red","border":"2px solid red"});
});</script>
</body>
</html>
第四步 我们把
<ul>ul (第一祖先 - 第一祖先节点)
<li>li (直接父节点)
<span>span</span>
</li>
<li>北京</li>
</ul>中北京的li加上一个class="beijing"试一试，
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul,li,span{
display: block;
border: 2px solid black;
color: black;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<ul>ul (第一祖先 - 第一祖先节点)
<li>li (直接父节点)
<span>span</span>
</li>
<li class="beijing">北京</li>
</ul>
<script src="../../js/jquery.js"></script>
<script> $(function(){
$("span").closest("beijing").css({"color":"red","border":"2px solid red"});
});</script>
</body>
</html>
什么都没变
总结：这说明closest只对与它紧挨它的上一级才有效果，否则无效。这就好比一个走丢的孩子，去找他的亲人，他不是找他的叔叔，姑姑，而是去找他亲生爸妈是一个道理，而如果是爸爸的上一级，便是爸爸的亲生爸爸。