JS - скрыть дивы после определенного подсчета в чистом JS

Question

У меня есть страница, на которой пользователь может ввести столько дел с определенным классом, который они хотят (filterDiv).Я хочу, чтобы кнопка Load More отображалась, если число элементов больше девяти.

Проблема в том, что я пытаюсь получить доступ к div с помощью класса filterDiv после девятой итерации и добавить класс скрытия.

Вот мой код:

const htCount = document.querySelectorAll('.filterDiv').length;

if (htCount > 9){
  document.querySelector('#loadMore').classList.add('show'); // load more button shows

};

Как добавить код для скрытия div 10,11,12 и т. Д., Пока не будет нажата кнопка «Загрузить еще»?

Answer 1

Если у вас есть документ с элементами div, который выглядит следующим образом:

<div class=“myDiv”> content </div>

Сначала вы можете получить все элементы div:

var myDivs = document.getEmementsByClassName(“myDiv”);

Затем перебрать их и спрятать некоторые из нихуказав атрибут их стиля следующим образом:

for(var i = 9; i < myDivs.length; i++) {
    myDivs[i].style.display = “none”
}

Итак, мы перебираем индексы с 9 до конца массива и делаем их невидимыми.Свойство direct style элемента имеет более высокий приоритет, чем css класса, поэтому элементы будут скрыты, и вы можете указать все свойства видимых элементов в css.

Затем при нажатии кнопки вы можете выполнить тот же цикли просто измените на .style.display = “block”

for(var i = 9; i < myDivs.length; i++) {
    myDivs[i].style.display = “block”
}