JavaScript - Обернуть каждые 3 элемента из массива в div - PullRequest
Новая
       34

JavaScript - Обернуть каждые 3 элемента из массива в div

1 голос
/ 21 февраля 2020

у меня массив состоит из 50 предметов.

Я хочу обернуть каждые 3 элемента в <div>.

Я ломаю голову, пытаясь добиться этого, но не могу заставить его работать 


var cards = [];

for(var i=0; i < 50; i++){
    cards.push('<div class="card-item">Test</div>');
}

for(var i = 0; i < cards.length; i++){
    if(i % 3 === 0){
        let slides = populateSlide(cards[i]);
        console.log(slides);
    }
}

populateSlide = (cards) => {
    return `<div class="carousel-item item">${cards}</div>`;
}

Используя приведенный выше код, мне удалось получить только один элемент при каждом умножении на 3. Следовательно, у моего div есть только один элемент вместо трех.

Заранее спасибо.

Ответы [ 4 ]

4 голосов
/ 21 февраля 2020

Вы можете хранить карточки во временном массиве и проверять его длину. Что-то вроде: 

{
  const populateSlide = cards => {
      console.log(cards)
  }
  const cards = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  let cardsTriple = []; // the temporary array

  cards.forEach( card => {
      cardsTriple.push(card); // add card to temp array
      if(cardsTriple.length === 3){
          let slides = populateSlide(cardsTriple);
          cardsTriple = []; // reset the temp array
      }
  });

  // there may still be cards available
  if (cardsTriple.length) {
    populateSlide(cardsTriple);
  }
}
.as-console-wrapper { top: 0; max-height: 100% !important; }
0 голосов
/ 21 февраля 2020

Вот решение, которое разбивает элементы на группы по 3: 

function chunks(array, n) {
  return Array(Math.ceil(array.length/n)).fill().map((_,i) => array.slice(i*n,i*n+n));
}

var cards = []
for(var i=0; i < 50; i++){
  cards.push('<div class="card-item">Test</div>');
}

var cardChunks = chunks(cards, 3)

var slider = cardChunks.map(cards => {
  return `<div class="carousel-item item">${cards.join('')}</div>`
}).join('')

Для разделения я использовал решение из: { ссылка }, но вы можете найти его в популярных библиотеках, таких как loda sh.

0 голосов
/ 21 февраля 2020

Используя CSS, а затем непосредственно вставьте все дочерние элементы в родительский div. Нет необходимости делать пылинки в JS. 

<div class="row" id="parent">
  <div class="col-sm-4" style="background-color:lavender;">AAA</div>
  <div class="col-sm-4" style="background-color:lavenderblush;">BBB</div>
  <div class="col-sm-4" style="background-color:lavender;">CCC</div>
  <div class="col-sm-4" style="background-color:lavender;">DDD</div>
  <div class="col-sm-4" style="background-color:lavenderblush;">EEE</div>
  <div class="col-sm-4" style="background-color:lavender;">FFF</div>
  <div class="col-sm-4" style="background-color:lavender;">AAA</div>
  <div class="col-sm-4" style="background-color:lavenderblush;">BBB</div>
  <div class="col-sm-4" style="background-color:lavender;">CCC</div>
  <div class="col-sm-4" style="background-color:lavender;">DDD</div>
  <div class="col-sm-4" style="background-color:lavenderblush;">EEE</div>
  <div class="col-sm-4" style="background-color:lavender;">FFF</div>    
</div>

cards.map(item => Document.getElementById('parent').appendChild(item));
0 голосов
/ 21 февраля 2020

Я рекомендую использовать .slice, а затем .wrapAll

вот пример: 

var divs = $("div > div");
for(var i = 0; i < cards.length; i+=3) {
  divs.slice(i, i+3).wrapAll("<div class='new'></div>");
}
...