Показать еще - независимые блоки

Question

Сделал поэтапную подгрузку блоков по 2 штуки через jquery, но работает некорректно, если таки блоков более одной группы. Понимаю, что нужно использовать each, но промучился уже пол-дня и никак не получается сделать, чтоб каждый блок был независим от соседних. Кто поможет?

  $('.last-works__items > div:nth-child(n+3)').addClass('hideitem')
        $(function () {
           $('.last-works__load-more').click(function () {
              $('.last-works__items > div.hideitem').slice(0, 2).addClass('showitem');
              $('.last-works__items > div.hideitem').slice(0, 2).removeClass('hideitem');
           
              if ($('.last-works__items > div').length == $('.last-works__items > div.showitem').length + 2) {
                  $('.last-works__load-more').addClass('hidebutton');
              }
           });
        });

.last-works__items > div.hideitem {
  height: 0;
  opacity: 0;
  z-index: -1;
  transition: .4s;
}
.last-works__items > div.showitem{
  height: auto;
  opacity: 1;
  z-index: 20;
  transition: .4s;
}
.last-works__load-more{
cursor: pointer;
}
.hidebutton{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
  <div class="last-works__items">
    <div class="last-works__item">1</div>
    <div class="last-works__item">2</div>
    <div class="last-works__item">3</div>
    <div class="last-works__item">4</div>
    <div class="last-works__item">5</div>
    <div class="last-works__item">6</div>
  </div>
  <div class="last-works__load-more">загрузить еще</div>
</div>
<div class="block">
  <div class="last-works__items">
    <div class="last-works__item">1</div>
    <div class="last-works__item">2</div>
    <div class="last-works__item">3</div>
    <div class="last-works__item">4</div>
    <div class="last-works__item">5</div>
    <div class="last-works__item">6</div>
  </div>
  <div class="last-works__load-more">загрузить еще</div>
</div>

Answer 1

Можно и без циклов обойтись. Надо просто изначально учитывать структуру.

$('.last-works__items > div:nth-child(n+3)').addClass('hideitem');
$(function () {
  $('.last-works__load-more').click(function () {
    let block = $(this).closest('.block');
    block.find('.last-works__items > div.hideitem').slice(0, 2).toggleClass('showitem hideitem')

     if (block.find('.last-works__items > div').length == block.find('.last-works__items > div.showitem').length + 2) {
      block.find('.last-works__load-more').addClass('hidebutton');
    } 
  });
});

.last-works__items > div.hideitem {
  height: 0;
  opacity: 0;
  z-index: -1;
  transition: .4s;
}
.last-works__items > div.showitem{
  height: auto;
  opacity: 1;
  z-index: 20;
  transition: .4s;
}
.last-works__load-more{
cursor: pointer;
}
.hidebutton{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
  <div class="last-works__items">
    <div class="last-works__item">1</div>
    <div class="last-works__item">2</div>
    <div class="last-works__item">3</div>
    <div class="last-works__item">4</div>
    <div class="last-works__item">5</div>
    <div class="last-works__item">6</div>
  </div>
  <div class="last-works__load-more">загрузить еще</div>
</div>
<div class="block">
  <div class="last-works__items">
    <div class="last-works__item">1</div>
    <div class="last-works__item">2</div>
    <div class="last-works__item">3</div>
    <div class="last-works__item">4</div>
    <div class="last-works__item">5</div>
    <div class="last-works__item">6</div>
  </div>
  <div class="last-works__load-more">загрузить еще</div>
</div>

БЛОГ НА HUSL

Показать еще - независимые блоки

Ответы (1 шт):