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>