我正在尝试使用 .parents 选择相邻 ul 中的一个元素,以便我可以单击一个元素来影响另一个元素。
我可以选择两个 ul 的父级 .outside,从 .ulB 内的范围开始,但是当我要求它返回并选择 .ulA 时,它不喜欢它。
有什么想法吗?可以使用这种方法或根本做到这一点吗?谢谢。
下面的示例代码。
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").parents(".outside > .ulA").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="ancestors">
<div class="outside" style="width:500px;">
<ul class="ulA">
<li></li>
</ul>
<ul class="ulB">
<li>
<span>span</span>
</li>
</ul>
</div>
</body>
</html>
最佳答案
span
没有与 .outside > .ulA
匹配的父级。您需要先找到父代,然后找到.ulA
后代:
$("span").
parents(".outside").
find(".ulA").
css({"color": "red", "border": "2px solid red"});
$("span").parents(".outside").find(".ulA").css({
"color": "red",
"border": "2px solid red"
});
.ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ancestors">
<div class="outside" style="width:500px;">
<ul class="ulA">
<li></li>
</ul>
<ul class="ulB">
<li>
<span>span</span>
</li>
</ul>
</div>
</div>
关于javascript - 选择相邻元素的子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32573202/