我有几个div，每个div都有相同的类。我想仅向包含单个项目的父母添加课程。
$(function() {
if($('.parent').children('.child').length !== 1)
$('.parent').addClass('single');
}); .single {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">child</div>
</div>
<div class="parent">
<div class="child">child</div>
<div class="child">child</div>
</div>
在第一个父级中，将添加“single”类，而第二个父级则不会。
谢谢你的帮助。
答案 0 :(得分：3)
演示2 是一个不完整的解决方案，因为.querySelector()是一个＆＃34;懒惰＆＃34; 方法，一旦找到匹配，它就会无论是否有多场比赛，都会停止。在演示2 中，原始解决方案已被注释掉，并且在HTML中添加了一对额外的.parent > .child:only-child元素。
新解决方案包括：
...使用 querySelectorAll() 将.parent > .child:only-child的多个个实例收集到NodeList - 然后... < / p>
...使用 Array.from() 将该NodeList转换为数组...
...以便我们可以将该数组运行到.forEach()数组方法中，该方法会将类.single分配给每个.parent。
:only-child CSS 和 jQuery 选择器。找到唯一的孩子然后 .parent() 。 jQuery版本非常易于使用，因为它实际上只需要查找一个孩子。查看演示1 以获取jQuery解决方案。
与jQuery类似，JavaScript可以使用CSS选择器:only-child来查找它，然后使用.parentNode来查找它.parent。要分配.single课程，我们使用.classList.add('single')。查看演示2 以获取详细的JavaScript解决方案。✎
演示3 ，仅限CSS示例，使用CSS选择器:only-child。由于CSS级联性质的限制，我们无法通过定位其子级来访问父级。此外，不用说，我们不能在没有JS / jQ的情况下分配类.single。
$('.child:only-child').parent().addClass('single');div {
min-height: 50px;
padding: 10px;
outline: 2px dotted green;
}
.single {
outline: 3px dashed red
}
.child:only-child {
outline: 1px solid blue
}<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
/* Add a `/` to the start of line to enable code
document.querySelector('.parent > .child:only-child').parentNode.classList.add('single');
//* Remove the `*` on the next line to disable the code
*/
var onlyChildren = Array.from(document.querySelectorAll('.parent > .child:only-child'));
onlyChildren.forEach(function(child, index) {
child.parentNode.classList.add('single');
});
//*/div {
min-height: 50px;
padding: 10px;
outline: 2px dotted green;
}
.single {
outline: 3px dashed red
}
.child:only-child {
outline: 1px solid blue
}<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
div {
min-height: 50px;
padding: 10px;
outline: 2px dotted green;
}
.single {
outline: 3px dashed red
}
.child:only-child {
outline: 1px solid blue
}<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
答案 1 :(得分：0)
你的问题是这一行：
$('.parent').addClass('single');。
通过执行此操作，您将匹配所有.parent。您需要迭代它们以有选择地添加单个类：
$(function() {
$('.parent').each(function() {
if ($(this).children('.child').length === 1) {
$(this).addClass('single');
}
})
});.single {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">child</div>
</div>
<div class="parent">
<div class="child">child</div>
<div class="child">child</div>
</div>
（还修复了你的情况，应该检查孩子的数量是否等于1，没有差别）
答案 2 :(得分：0)
$(function() {
$.each($('.parent'),function(){
if($(this).children('.child').length == 1)
$(this).addClass('single');
})
});.single{color:red}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
1</div>
</div>
<div class="parent">
<div class="child">2</div>
<div class="child">3</div>
</div>
现在试试。
答案 3 :(得分：0)
您也可以使用find()。查找名称为child的课程。
$(function() {
$('.parent').each(function() {
if ($(this).find('.child').length == 1) {
$(this).addClass('single');
}
})
});.single {
color: #00f;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">child</div>
</div>
<div class="parent">
<div class="child">child</div>
<div class="child">child</div>
</div>