时间戳

首页 > 解决方案 > JQuery 将每个函数加倍

jquery - JQuery 将每个函数加倍

问题描述

我有两个.school元素，每个学校都有 3 个.my-child元素。

我的工作是寻找.my-child每所学校的元素，为第一个孩子应用红色背景，为第二个孩子应用绿色背景，为第三个孩子应用蓝色背景。

在每所学校，我的代码是为每个 .my-child 添加一个新类：child1、child2、child3 并为每个类应用背景颜色。

问题：我在第一所学校取得了预期的成绩，我添加了 .child1、.child2、.child3 每个 .my-child。但是，第二所学校，应该是一样的：.child1, .child2, .child3，但是我得到了.child3, .child4, .child6。

jsfiddle

$('.school').each(function() {
  $('.my-child').each(function(i, el) {
    $(this).addClass('child' + (i + 1));
  });
})
.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="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>

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

标签： jqueryhtmlcss

解决方案

您几乎明白了——您需要在每个.each()循环中引用特定元素。您分别为第二个执行此操作，但不是为第一个执行此操作：

$('.school').each(function(a, b){
    $(b).find('.my-child').each(function(i, el) {
        $(this).addClass('child'+(i+1));
  });
})

Updated jsFiddle

推荐阅读