Задача: распределить по 3 элемента (.block-service
) в каждый контейнер .about-page-process-row
. Всего контейнеров 5, а блоков будет 15.
Этот код работает правильно, но есть ли возможность как-либо упростить цикл for() {}
???
let blockService = document.querySelectorAll('.block-service'); // div-ы .block-service
let blocksArray = []; // сюда будут попадать все blockService для дальнейшей сортировки
let aboutPageProcessRow = document.querySelectorAll('.about-page-process-row'); // контейнеры
// Наполняю массив blocksArray и удаляю со страницы blockService
blockService.forEach(item => {
blocksArray.push(item);
item.remove();
});
// Для нечётных контейнеров flex-direction:row-reverse;, для чётных row
aboutPageProcessRow.forEach((container, i) => {
if (i % 2 != 0) {
container.style.flexDirection = "row-reverse";
} else {
container.style.flexDirection = "row";
}
})
// Наполняю контейнеры blockService-ами по 3шт. каждый контейнер в разных диапазонах
for (let i = 0; i < blocksArray.length; i++) {
if (blocksArray.indexOf(blocksArray[i]) < 3) {
aboutPageProcessRow[0].insertAdjacentElement('beforeend', blocksArray[i]);
} else if (blocksArray.indexOf(blocksArray[i]) >= 3 && blocksArray.indexOf(blocksArray[i]) < 6) {
aboutPageProcessRow[1].insertAdjacentElement('beforeend', blocksArray[i]);
} else if (blocksArray.indexOf(blocksArray[i]) >= 6 && blocksArray.indexOf(blocksArray[i]) < 9) {
aboutPageProcessRow[2].insertAdjacentElement('beforeend', blocksArray[i]);
} else if (blocksArray.indexOf(blocksArray[i]) >= 9 && blocksArray.indexOf(blocksArray[i]) < 12) {
aboutPageProcessRow[3].insertAdjacentElement('beforeend', blocksArray[i]);
} else if (blocksArray.indexOf(blocksArray[i]) >= 12 && blocksArray.indexOf(blocksArray[i]) < 15) {
aboutPageProcessRow[4].insertAdjacentElement('beforeend', blocksArray[i]);
}
}