我有2个 .school
,几个 .class-room
,里面有一些 .my-child
。
如果.my-child
位于学校的第一个.class-room
中,我想为具有黄色背景的学校设计。但这并不如预期的那样显示。
jsfiddle
$('.school').each(function() {
$(this).find('.my-child').each(function(i, el) {
$(this).addClass('child' + (i + 1));
});
if ($('.school .class-room:first-child').children().hasClass('.my-child')) {
$('.school').css('background', 'yellow');
}
})
.my-child.child1 {
background: red;
}
.my-child.child2 {
background: green;
}
.my-child.child3 {
background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="school">
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
</div>
<br><br>
<div class="school">
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
</div>
您不能在Hasclass中使用点:
更改:
.hasClass('.my-child')
to:
.hasClass('my-child')
我还将在您的条件下使用$(this(,仅选择正确的学校来更改背景颜色:
if ( $(this).children('.class-room:first-child').children().hasClass('my-child') )
https://jsfiddle.net/5wxaoj1m/
编辑:已更新以解决评论中的问题,我添加了JSFiddle链接。
我建议移动each
循环外选择的代码。然后,使用:has()
选择器找到学校。
$('.school:has(.class-room:first-child>.my-child)').addClass('has-my-child');
.my-child.child1 {
background: red;
}
.my-child.child2 {
background: green;
}
.my-child.child3 {
background: blue;
}
.has-my-child { background-color: yellow; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="school">
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
</div>
<br><br>
<div class="school">
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
</div>
请注意,这可能比使用普通旧JavaScript慢:
const school = Array.from(document.querySelectorAll('.school')).filter(school => school.querySelectorAll('.class-room:first-child > .my-child').length === 1)[0];
if (school) {
school.classList.add('has-my-child');
}
.my-child.child1 {
background: red;
}
.my-child.child2 {
background: green;
}
.my-child.child3 {
background: blue;
}
.has-my-child {
background-color: yellow;
}
<div class="school">
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
</div>
<br><br>
<div class="school">
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
</div>
要获得预期的结果,请在以下选项中使用等式的索引和(':':first-child'(
$(this).children('.class-room').eq(0).children('.my-child').is(':first-child')
1。首先带有等式(0(的班级
2.检查my-child是第一个或不使用儿童('。my-child'(。是(':':first-child'(
$('.school').each(function() {
$(this).find('.my-child').each(function(i, el) {
$(this).addClass('child' + (i + 1));
});
if($(this).children('.class-room').eq(0).children('.my-child').is(':first-child')){
$(this).css('background', 'yellow')
}
})
.my-child.child1 {
background: red;
}
.my-child.child2 {
background: green;
}
.my-child.child3 {
background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="school">
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
</div>
<br><br>
<div class="school">
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
<div class="class-room">
<div class="my-child">Child</div>
</div>
<div class="class-room">
<div class="other">Child</div>
</div>
</div>
codepen -https://codepen.io/nagasai/pen/mybbej
我相信您可以摆脱javaScript并在CSS上做到这一点。
将其添加到您的CSS:
.class-room:first-of-type > .my-child { background: yellow; }
应该照顾的。