如果第一个孩子hasClass，如何设置元素的样式？

时间：2019-05-03 20:25:47

标签： javascript jquery html css

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

4 个答案:

答案 0 :(得分：4)

您不能在hasClass中使用该点：

更改：

.hasClass('.my-child')

收件人：

.hasClass('my-child')

我还将在您的条件中使用$（this）仅选择正确的学校以更改以下内容的背景颜色：

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

https://jsfiddle.net/5wxaoj1m/

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

答案 1 :(得分：3)

我建议将用于选择学校的代码移到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>

答案 2 :(得分：1)

要获得预期的结果，请使用以下将索引与eq和is（'：first-child'）一起使用的选项

$(this).children('.class-room').eq(0).children('.my-child').is(':first-child')

1。第一个具有eq（0）的.class-room
2.检查my-child是第一个孩子还是不使用children（'。my-child'）。is（'：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

答案 3 :(得分：0)

我相信您可以摆脱JavaScript并在CSS上完成所有工作。

将此添加到CSS：

.class-room:first-of-type > .my-child { background: yellow; }

应该照顾它。

相关问题
最新问题