我有一个包含 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
只有单个项目而不是三个。
提前致谢。
最佳答案
您可以将卡片存储在临时数组中并检查其长度。像这样的东西:
{
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; }
关于JavaScript - 将数组中的每 3 个项目包装到一个 div 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60334675/