Question

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

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

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

问题：我上初中时就达到了预期，每个.my-child中都添加了.child1，.child2，.child3。但是，第二所学校应该是相同的：.child1，.child2，.child3，但是我却拥有.child3，.child4，.child6。

answer

$('.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>

Answer 1

您几乎了解了它-您需要在每个.each()循环中引用特定的元素。您是每个第二个都这样做，但第一个不是：

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

Updated jsFiddle

Answer 2

在第二行中，您并不仅仅是从第一个选择器中选择元素。

$('.school').each(function() {
  $(this).find('.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="my-child">Child</div>
    <div class="my-child">Child</div>
    <div class="my-child">Child</div>
  </div>
  <div class="class-room">
    <div class="my-child">Child</div>
    <div class="my-child">Child</div>
    <div class="my-child">Child</div>
    <div class="my-child">Child</div>
  </div>
</div>

Answer 3

您不需要嵌套循环，只需寻找CSS选择器.school .my-child就可以选择所有这些。如果其他任何地方都没有.my-child元素，您也可以自行选择。

$('.school .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="my-child">Child</div>
    <div class="my-child">Child</div>
    <div class="my-child">Child</div>
  </div>
  <div class="class-room">
    <div class="my-child">Child</div>
    <div class="my-child">Child</div>
    <div class="my-child">Child</div>
    <div class="my-child">Child</div>
  </div>
</div>

或者...如果总是这样，那么您甚至根本不需要JavaScript！

.class-room:nth-child(1) .my-child:nth-child(1) {
  background: red;
}

.class-room:nth-child(1) .my-child:nth-child(2) {
  background: green;
}

.class-room:nth-child(1) .my-child:nth-child(3) {
  background: blue;
}

<div class="school">
  <div class="class-room">
    <div class="my-child">Child</div>
    <div class="my-child">Child</div>
    <div class="my-child">Child</div>
  </div>
  <div class="class-room">
    <div class="my-child">Child</div>
    <div class="my-child">Child</div>
    <div class="my-child">Child</div>
    <div class="my-child">Child</div>
  </div>
</div>

jQuery Double每个函数

3 个答案: