1

Задача: распределить по 3 элемента (.block-service) в каждый контейнер .about-page-process-row. Всего контейнеров 5, а блоков будет 15. Так будут располагаться блоки .block-service внутри .about-page-process-row

Этот код работает правильно, но есть ли возможность как-либо упростить цикл 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]);
    }
}
17
  • 1
    добавь описание, что вообще происходит в данном коде.
    – Grundy
    1 апр 2021 в 8:18
  • момент, сейчас добавлю. 1 апр 2021 в 8:19
  • 1
    switch-case сразу приходит на ум, если в логику не вдаваться... 1 апр 2021 в 8:24
  • А, ну логика есть: aboutPageProcessRow[i] + ввести ещё один инкримент, j +3 например и blocksArray.indexOf(blocksArray[i]) >= j. P. S. хотя там 11 и 13 не вписывается, но можно массив из нужных цифер сделать и его перебирать в цикле по i. 1 апр 2021 в 8:25
  • Оставил комменты 1 апр 2021 в 8:29

3 ответа 3

1

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

// ... 

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]);
}
1

Если у вас шесть контейнеров, то элементов для заполнения должно быть 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>

0

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

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);
})

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.