1、第一步 引入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的颜色变红了
2、第二步 我们把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>
3、第三步 我们在li加入一个li元素，代码改成原来试一试这时，我们会发现这个 <u盟敢势袂l>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>
4、第四步 我们把<ul>ul (第一祖先 - 第一祖先节点)<li>盟敢势袂li (直接父节点)<sp锾攒揉敫an>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只对与它紧挨它的上一级才有效果，否则无效。这就好比一个走丢的孩子，去找他的亲人，他不是找他的叔叔，姑姑，而是去找他亲生爸妈是一个道理，而如果是爸爸的上一级，便是爸爸的亲生爸爸。