如何检查 jQuery 的 FIND 结果
use*_*104 6 html javascript css jquery
我一直在努力解决这个简单的脚本，并且在 StackOverflow 中找不到相关问题。这是我的问题。
我有两个盒子。<div class="notselected">如果通过单击事件变为，则框将以蓝色突出显示<div class="selected">。
如果没有选择任何框，则父框应以红色突出显示，如下所示：
这是一个片段：
$(document).ready(function(){
var parent = $(this).find(".parent");
if(parent) {
var selected = parent.find("div.selected");
if(selected) {
selected.css({"color": "blue", "border": "2px solid blue"});
}
else {
parent.css({"color": "red", "border": "2px solid red"});
}
}
});.ancestors *:not(script) {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="ancestors">
<div class="parent"> Parent Box
<div class="notselected"> Box A </div>
<div class="notselected"> Box B </div>
</div>
</body>请让我知道我缺少什么。谢谢你的帮助！
你们非常接近！
只需检查selected.length代替selected.
家长选择演示
$(document).ready(function() {
var parent = $(this).find(".parent");
if (parent) {
var selected = parent.find("div.selected");
if (selected.length) {
selected.css({
"color": "blue",
"border": "2px solid blue"
});
} else {
parent.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/3.2.1/jquery.min.js"></script>
<script>
</script>
<div class="parent"> Parent Box
<div class="noselected"> Box A </div>
<div class="notselected"> Box B </div>
</div>儿童选择演示
$(document).ready(function() {
var parent = $(this).find(".parent");
if (parent) {
var selected = parent.find("div.selected");
if (selected.length) {
selected.css({
"color": "blue",
"border": "2px solid blue"
});
} else {
parent.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/3.2.1/jquery.min.js"></script>
<script>
</script>
<div class="parent"> Parent Box
<div class="selected"> Box A </div>
<div class="notselected"> Box B </div>
</div>