时间戳

首页 > 解决方案 > 如果第一个孩子有类，如何设置元素的样式？

javascript - 如果第一个孩子有类，如何设置元素的样式？

问题描述

我有 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>

标签： javascriptjqueryhtmlcss

解决方案

您不能在 hasClass 中使用点：

改变：

.hasClass('.my-child')

到：

.hasClass('my-child')

我也会在你的条件中使用 $(this) 来只选择正确的学校来改变背景颜色：

if ( $(this).children('.class-room:first-child').children().hasClass('my-child') )

https://jsfiddle.net/5wxaoj1m/

编辑：更新以解决评论中的问题，我添加了一个 jsfiddle 链接。

推荐阅读