Question

我尝试将课程.events-row-fill添加到.events-row，如果它有两个孩子，但它不起作用。

这是我的剧本：

if($('.events-row').children().length === 2) {
  $('.events-row').addClass('events-row-fill');
}

HTML结构（减去内容）：

<div class="events-row">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>
<div class="events-row">
  <div class="card"></div>
  <div class="card"></div>
</div>

演示：CodePen

谢谢！

Answer 1

$(".events-row")将返回一个包含2个jQuery元素的数组（每个元素对应于DOM中的.events-row）。您需要迭代该数组并检查每个数组并相应地应用类。

$(".events-row").each(function() {
  // .toggleClass("classname", true/false)
  $(this).toggleClass("events-row-fill", $(this).children().length === 2);
});

.events-row-fill {
  background: yellow;
}
.events-row {
  border: 2px solid black;
  margin: 5px 0;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="events-row">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
</div>
<div class="events-row">
  <div class="card">1</div>
  <div class="card">2</div>
</div>

如果有两个子类，则将类添加到容器

1 个答案: