jQuery.获取父节点

获取父节点


通过获取父节点,还可以获取父节点的父节点。

有3个常用方法:

方法 说明
parent() 选取父节点
parents() 选取所有父节点
parentsUntil("div") 选取所父节点,但不包含后面指定的节点的父级

 

<!DOCTYPE html>
<html>
<head>
<title>获取父节点</title>
<meta charset="UTF-8">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
<style>
.box{
border: 1px solid black;
padding: 1px;
margin-bottom: 12px;
}
</style>
</head>
<body>
<div>
<ul id="ul">
<li id="a">油条</li>
<li id="b">包子</li>
<li id="c">米饺</li>
<li id="d"><a>鱼粉</a></li>
</ul>
</div>
<script>
$('a').parentsUntil("div").attr("class","box")
</script>
</body>
</html>

 

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<title>获取父节点</title>
<meta charset="UTF-8">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
<style>
.box{
border: 1px solid black;
padding: 1px;
margin-bottom: 12px;
}
</style>
</head>
<body>
<div>
<ul id="ul">
<li id="a">油条</li>
<li id="b">包子</li>
<li id="c">米饺</li>
<li id="d"><a>鱼粉</a></li>
</ul>
</div>
<script>
$('a').parent("div").attr("class","box")
</script>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<title>获取父节点</title>
<meta charset="UTF-8">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
<style>
.box{
border: 1px solid black;
padding: 1px;
margin-bottom: 12px;
}
</style>
</head>
<body>
<div>
<ul id="ul">
<li id="a">油条</li>
<li id="b">包子</li>
<li id="c">米饺</li>
<li id="d"><a>鱼粉</a></li>
</ul>
</div>
<script>
$('a').parents("div").attr("class","box")
</script>
</body>
</html>

 

 

posted @ 2018-07-23 15:25  HL()  阅读(361)  评论(0编辑  收藏  举报