多个 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，因为前者会为您提供该特定元素的子元素并选择选择器，而后者会为您提供所有.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>