Ограничить показ контента (кнопка "more") по трем div-ам

Question

Есть скрипт показа дополнительного контента по нажатию кнопки "More". У меня три главных div, в котором размещаются дочерние div и соответственно три кнопки "More". Сейчас скрипт при клике на первую кнопку "More" скрипт подгружает все дочерние div подряд, вне зависимости от трех главных div. А когда все дочерние div показаны первая кнопка "More" пропадает, а остальные две остаются видимыми.

Можно ли (без изменения html кода) разграничить показ дочерних div в рамках каждого главного div, а кнопки "More" исчезали в зависимости от главного div в которых они находятся? Ниже приведу сам скрипт, думаю, вы поймете, что я имею ввиду.

let data = Array.from(document.querySelectorAll('.tabcontent .blog-cart-wrapper')),
  step = 2,
  item = 0;

data.slice(step).forEach(e => e.style.display = 'none');
item += step;

document.querySelector('#more').addEventListener('click', function(e) {
  let tmp = data.slice(item, item + step);
  tmp.forEach(e => e.style.display = 'block');
  item += step;

  if (tmp.length < 2)
    this.remove();
});

#ccc {
  background: #9be8e1;
}

#bbb {
  background: #ec7878;
}

#ggg {
  background: #c1a5f7;
}

<div id="ccc" class="tabcontent s-blog-card__container s-blog-card_container mt-none">
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div style="width: 100%;"><input type="button" id="more" class="heading-link-button" value="More" /></div>
</div>
<div id="bbb" class="tabcontent s-blog-card__container s-blog-card_container mt-none">
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div style="width: 100%;"><input type="button" id="more" class="heading-link-button" value="More" /></div>
</div>
<div id="ggg" class="tabcontent s-blog-card__container s-blog-card_container mt-none">
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div style="width: 100%;"><input type="button" id="more" class="heading-link-button" value="More" /></div>
</div>

Answer 1

Можно ли ... разграничить показ дочерних

Можно. Все операции с дочерними блоками надо выполнять в контексте их родителя. Например -

document.querySelectorAll('.tabcontent').forEach(parent => 
  [...parent.querySelectorAll('.blog-cart-wrapper')].slice(step).forEach(child => 
    child.style.display = 'none'
  )
);

Кроме того. Не используйте повтoряющиеся id. Выборка

document.querySelector('#more')

находит только один (первый) элемент с id="more".

document.querySelectorAll('.tabcontent').forEach(parent => {
  let step = 2,
    item = 0;

  let data = [...parent.querySelectorAll('.blog-cart-wrapper')];
  data.slice(step).forEach(child =>
    child.style.display = 'none'
  );
  item += step;

  parent.querySelector('#more').addEventListener('click', function(e) {
    let tmp = data.slice(item, item + step);
    tmp.forEach(e => e.style.display = 'block');
    item += step;

    if (tmp.length < 2)
      this.remove();
  });
});

#ccc {
  background: #9be8e1;
}

#bbb {
  background: #ec7878;
}

#ggg {
  background: #c1a5f7;
}

<div id="ccc" class="tabcontent s-blog-card__container s-blog-card_container mt-none">
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div style="width: 100%;"><input type="button" id="more" class="heading-link-button" value="More" /></div>
</div>
<div id="bbb" class="tabcontent s-blog-card__container s-blog-card_container mt-none">
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div style="width: 100%;"><input type="button" id="more" class="heading-link-button" value="More" /></div>
</div>
<div id="ggg" class="tabcontent s-blog-card__container s-blog-card_container mt-none">
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div class="blog-cart-wrapper">
    Контент
  </div>
  <div style="width: 100%;"><input type="button" id="more" class="heading-link-button" value="More" /></div>
</div>

БЛОГ НА HUSL

Ограничить показ контента (кнопка "more") по трем div-ам

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