Привет, я попытался сделать заголовок этого поста кратким и описывающим то, о чем он на самом деле, я думаю, я все еще получаю от этого удовольствие.

Несколько недель назад у меня была такая же проблема, и я перепробовал все ключевые слова в поиске Google, чтобы найти единое всеобъемлющее решение, но, похоже, не нашел его. Так что я надеюсь, что это поможет кому-то.

Вот пример сценария, в котором вам может понадобиться это решение:

Вы хотите отобразить длинный список вопросов, полученных из API, но этот список очень длинный и содержит около 105 вопросов. Если вы выведете на своей странице все 105 вопросов, пользователь быстро устанет перебирать вопросы. Итак, вы решили отображать только 10 вопросов за раз.

Итак, как нам этого добиться?

Вероятно, есть и другие решения с другими JS-фреймворками и библиотеками представлений, но это просто JS.

Посмотреть полное решение на codepen

So…

Если у вас есть файл HTML, как показано ниже, и вы хотите отобразить содержимое в div с именем класса «content», по крупицам, вы можете выполнить следующие шаги.

<div class="content">1</div>
<div class="content">2</div>
...

Стиль отображаемого класса содержимого: нет; чтобы удалить его из отображения DOM, чтобы он не отображался при загрузке html-страницы.

.content{
    display: none;
}

С помощью javascript получите список (коллекция HTML) всех элементов с именем класса контент, преобразуйте его в правильный массив javascript, чтобы вы могли выполнять все методы, которые может выполнять массив. Это так, потому что когда вы получаете HTML-коллекции, элементы имеют некоторые свойства в массиве, но это не так.

var domList = document.getElementsByClassName('content');
var toDisplayArray = [];
for( var i = 0; i < domList.length; i++){
    toDisplayArray.push(domList[i]);
  }

С новым массивом «toDisplayArray» мы можем начать отображать элементы в битах или срезах, используя метод slice() массивов Javascript, и изменить стиль отображения, чтобы отобразить часть, которую мы хотим показать на загруженной странице.

// Handling the part of the array of contents to hide from display
var toHide = toDisplayArray.slice(begin, end);
for(var i = 0; i < toHide.length; i++){
    toHide[i].style.display = "none";
}
// Increments to begin and end values
begin = end;
end = end + 3;
// Handling what part of the array to display
var toShow = toDisplayArray.slice(begin, end);
for(var i = 0; i < toShow.length; i++){
    toShow[i].style.display = "block";
}

Затем вы получите кнопку и добавите к ней прослушиватель событий щелчка, чтобы обрабатывать переключение элементов, которые нужно отображать, а какие нет.

var button = document.getElementById('btn');
button.addEventListener('click', function(e){
    e.preventDefault();
    ............
    // The code above
})

В основном это то, как отображать содержимое в битах, и это особенно полезно, когда список длинный, и вы не хотите утомлять человека, просматривающего список, а также для лучшего представления.

Надеюсь, это полезно.

Полное решение