Как можно упростить код JS

Question

Задача: распределить по 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]);
    }
}

Answer 1

Может так чуть короче и читаемо будет

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) => {
     container.style.flexDirection = (i % 2 != 0) ? "row-reverse":"row";
    }
})

// Наполняю контейнеры blockService-ами по 3шт. каждый контейнер в разных диапазонах
function insertEl(v,i) {
  aboutPageProcessRow[i].insertAdjacentElement('beforeend', v)
}

blocksArray.forEach((v,i) =>{
  if (i < 3) return insertEl(v,0);
  if (i >= 3 && i < 6) return insertEl(v,1);
  if (i >= 6 && i < 9) return insertEl(v,2);
  if (i >= 9 && i < 11) return insertEl(v,3);
  if (i >= 11 && i < 13) return insertEl(v,4);
  if (i >= 13 && i < 15) return insertEl(v,5);
})

Answer 2

С каждой третьей итерацией нужно увеличивать индекс массива на один. Значит индекс массива равен номеру итерации деленому на три и округленному вниз.

// ... 

aboutPageProcessRow.forEach((container, i) => {
    container.style.flexDirection = (i % 2) ? 'row-reverse' : 'row';
});

for (let i = 0; i < blocksArray.length; i++) {
    const z = Math.min(Math.floor(i / 3), 5);
    aboutPageProcessRow[z].insertAdjacentElement('beforeend', blocksArray[i]);
}

Answer 3

Если у вас шесть контейнеров, то элементов для заполнения должно быть 6 * 3 = 18. Код можно упростить до прямой вставки в цикле выше при переборе контейнеров. Единственное, что splice изменяет текущий массив, не забывайте об этом.

let blockService = document.querySelectorAll('.block-service'); 
let blocksArray = []; 
let aboutPageProcessRow = document.querySelectorAll('.about-page-process-row'); 


blockService.forEach(item => {
    blocksArray.push(item);
    item.remove();
});


aboutPageProcessRow.forEach((container, i) => {
    if (i % 2 != 0) {
        container.style.flexDirection = "row-reverse";
    } else {
        container.style.flexDirection = "row";
    }
    blocksArray
      .splice(0,3)
      .forEach(item => container.insertAdjacentElement('beforeend', item));
})

.about-page-process-row{
  outline: 1px solid black;
  margin-top: 10px;
}

.block-service{
  outline: 1px solid black;
}

<div class="about-page-process-row"></div>
<div class="about-page-process-row"></div>
<div class="about-page-process-row"></div>
<div class="about-page-process-row"></div>
<div class="about-page-process-row"></div>
<div class="about-page-process-row"></div>

<div class="block-service">1</div>
<div class="block-service">2</div>
<div class="block-service">3</div>
<div class="block-service">4</div>
<div class="block-service">5</div>
<div class="block-service">6</div>
<div class="block-service">7</div>
<div class="block-service">8</div>
<div class="block-service">9</div>
<div class="block-service">10</div>
<div class="block-service">11</div>
<div class="block-service">12</div>
<div class="block-service">13</div>
<div class="block-service">14</div>
<div class="block-service">15</div>
<div class="block-service">16</div>
<div class="block-service">17</div>
<div class="block-service">18</div>

БЛОГ НА HUSL

Как можно упростить код JS

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