javascript - 多个div addClass和增量后缀

Question

我在这里进行砌体工作 我正在向 .gallery-items 动态添加类 我附加类 .column1, .column1 和 .mansory-item 附加 .image-holder 后缀增量。 主要父 div 是 .masonry-grid 所以我有多个 .masonry-grid div。

因此，第一个父 div 附加 .image-holder 后缀，增量工作正常。

但是对于从 6,7,8 n 开始的第二个父增量。我想从 1,2,3 和 4,5 开始，就像所有父 div 的第一个 div 一样。

我曾尝试使用 $(this) 但无法实现 谁能建议我如何实现所需的输出？

$(document).ready(function() {
  $('.gallery-items:nth-of-type(odd)').addClass('column1');
  $('.gallery-items:nth-of-type(even)').addClass('column2');

  $('.masonry-grid').each(function() {
    $(".column1").children('.mansory-item').each(function(i) {
      $(this).addClass("image-holder" + (i + 1));
    });
    $(".column2").children('.mansory-item').each(function(i) {
      $(this).addClass("image-holder" + (i + 4));
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="masonry-grid">
  <div class="gallery-items">
    <div class="mansory-item">
    </div>
    <div class="mansory-item">
    </div>
    <div class="mansory-item">
    </div>
  </div>
  <div class="gallery-items">
    <div class="mansory-item">
    </div>
    <div class="mansory-item">
    </div>
  </div>
</div>

<div class="masonry-grid">
  <div class="gallery-items">
    <div class="mansory-item">
    </div>
    <div class="mansory-item">
    </div>
    <div class="mansory-item">
    </div>
  </div>
  <div class="gallery-items">
    <div class="mansory-item">
    </div>
    <div class="mansory-item">
    </div>
  </div>
</div>

Answer 1

您可以使用 $(this).find 而不是 $(".column1").children 因为前者会给您选择该特定元素的 child 选择器的选择器，而后者为您提供所有 .column1 元素:

$(document).ready(function() {
  $('.gallery-items:nth-of-type(odd)').addClass('column1');
  $('.gallery-items:nth-of-type(even)').addClass('column2');

  $('.masonry-grid').each(function() {
    $(this).find('.column1 .mansory-item').each(function(i) {
      $(this).addClass("image-holder" + (i + 1));
    });
    $(this).find('.column2 .mansory-item').each(function(i) {
      $(this).addClass("image-holder" + (i + 4));
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="masonry-grid">
  <div class="gallery-items">
    <div class="mansory-item">1
    </div>
    <div class="mansory-item">2
    </div>
    <div class="mansory-item">3
    </div>
  </div>
  <div class="gallery-items">
    <div class="mansory-item">4
    </div>
    <div class="mansory-item">5
    </div>
  </div>
</div>

<div class="masonry-grid">
  <div class="gallery-items">
    <div class="mansory-item">6
    </div>
    <div class="mansory-item">7
    </div>
    <div class="mansory-item">8
    </div>
  </div>
  <div class="gallery-items">
    <div class="mansory-item">9
    </div>
    <div class="mansory-item">10
    </div>
  </div>
</div>