jQuery遍历closest()方法

最新推荐文章于 2023-08-21 18:09:17 发布

♕时光以北暮南城

最新推荐文章于 2023-08-21 18:09:17 发布

阅读量189

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_43742368/article/details/106374152

版权

前端专栏收录该内容

44 篇文章

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
	//从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素
	$(document).ready(function() {
        $("button:first").click(function(){
			$("li").closest("div").css("border","1px solid red");//通过li查找第一个祖先div加边框
			})
		$("button:last").click(function(){
			$(".q2").closest(".q1").css("border","1px solid blue");
			})//通过q2查找到第一个class=q1的祖先加边框
    });
    
    </script>
</head>

<body>
<div class="aa">
	<span class="b1">aa</span>
    <span class="b2">bb</span>
    <span class="b3">cc</span>
</div>
<div class="aa">
	<ul class="q1">
    	<li class="a1">
        	<ul class="q2">
    			<li class="c1">dd</li>
        		<li class="c2">ee</li>
        		<li class="c3">ff</li>
    		</ul>
        </li>
        <li class="a2">ee</li>
        <li class="a3">ff</li>
    </ul>
</div>
<div class="aa">
	<ul class="q1">
    	<li class="a1">dd</li>
        <li class="a2">ee</li>
        <li cliass="a3"><p>sfe</p></li>
    </ul>
</div><br/>
<button>点击1</button>
<button>点击2</button>
</body>

</html>

在这里插入图片描述