JavaScript - 将数组中的每 3 个项目包装到 div

Question

I have an array consists 50 items.

I want to wrap every 3 items to a <div> .

I'm cracking my head trying to achieve this but I can't get it to work

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

Using the code above, I only managed to get a single item in every multiply of 3. Hence my div only has single item instead of three.

Thanks in advance.

Answer 1

You can store the cards in a temporary array and check its length. Something like:

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

Answer 2

I'll recommand to use .slice and then .wrapAll

here is an example :

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

Answer 3

Using CSS, and then directly insert all children into the parent div. No need to do anthing in 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));

Answer 4

Here is solution that's chunking items to groups of 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('')

For chunking I used solution from: https://stackoverflow.com/a/10456644/4267716 but you can find it in popular libraries like lodash.