Здравствуйте. Здесь нужно бы обрабатывать каждую секцию отдельно, используя отдельный массив элементов для каждой, а потом генерировать независимые контролы пагинации для каждой секции.
<div class="wrap_item" data-section="1">
<h3 class="title_heading">Секция №1</h3>
<div class="wrap_elements">
<div class="class_element">Элемент 1</div>
<div class="class_element">Элемент 2</div>
<div class="class_element">Элемент 3</div>
<div class="class_element">Элемент 4</div>
<div class="class_element">Элемент 5</div>
</div>
<div class="pagination"></div>
</div>
<div class="wrap_item" data-section="2">
<h3 class="title_heading">Секция №2</h3>
<div class="wrap_elements">
<div class="class_element">Элемент A</div>
<div class="class_element">Элемент B</div>
<div class="class_element">Элемент C</div>
<div class="class_element">Элемент D</div>
<div class="class_element">Элемент E</div>
</div>
<div class="pagination"></div>
</div>
<div class="wrap_item" data-section="3">
<h3 class="title_heading">Секция №3</h3>
<div class="wrap_elements">
<div class="class_element">Элемент α</div>
<div class="class_element">Элемент β</div>
<div class="class_element">Элемент γ</div>
<div class="class_element">Элемент δ</div>
<div class="class_element">Элемент ε</div>
</div>
<div class="pagination"></div>
</div>
document.addEventListener('DOMContentLoaded', () => {
const itemsPerPage = 2;
document.querySelectorAll('.wrap_item').forEach((section) => {
const wrapElements = section.querySelector('.wrap_elements');
const elements = Array.from(wrapElements.children);
const paginationContainer = section.querySelector('.pagination');
const totalPages = Math.ceil(elements.length / itemsPerPage);
function showPage(page) {
elements.forEach((el, index) => {
el.style.display =
index >= (page - 1) * itemsPerPage && index < page * itemsPerPage
? ''
: 'none';
});
}
function createPagination() {
paginationContainer.innerHTML = ''; // очистили контейнер пагинации
for (let i = 1; i <= totalPages; i++) {
const button = document.createElement('button');
button.textContent = i;
button.addEventListener('click', () => {
showPage(i);
updateActiveButton(i);
});
paginationContainer.appendChild(button);
}
updateActiveButton(1);
}
function updateActiveButton(activePage) {
paginationContainer.querySelectorAll('button').forEach((btn, index) => {
btn.classList.toggle('active', index + 1 === activePage);
});
}
showPage(1);
createPagination();
});
});
.wrap_elements {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.class_element {
padding: 10px;
border: 1px solid #ccc;
background: #f5f5f5;
}
.pagination button {
margin: 0 5px;
padding: 5px 10px;
border: none;
background: #ddd;
cursor: pointer;
}
.pagination button.active {
background: #ff6f61;
color: #fff;
}
Теперь имеем что? Каждый .wrap_item обрабатывается отдельно, кайф. Все дочерние элементы .class_element собираются в массив, ну красота. Style.display для скрытия/показа элементов в зависимости от текущей страницы.
Количество кнопок определяется totalPages.
При клике на кнопку отображаются элементы, соответствующие выбранной странице. Вроде ничего не упустил.
