JavaScript-从一个数组到一个div每隔3个项目包装一次

我有一个由50个项目组成的数组

我想将每3个项目包装成一个

我正在绞尽脑汁试图实现这一目标，但我无法让它发挥作用

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

var卡=[]；
对于（变量i=0；i<50；i++）{
卡片。推送（“测试”）；
}
对于（变量i=0；i{
返回`${cards}`；
}

使用上面的代码，我只能在3的每一次乘法中得到一个项目。因此，我的

div

只有一项而不是三项

---

提前谢谢。

我建议您先使用

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

var divs=$（“div>div”）；
对于（变量i=0；i

使用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));

AAA
BBB
CCC
DDD
EEE
FFF
AAA
BBB
CCC
DDD
EEE
FFF
cards.map（item=>Document.getElementById（'parent'）.appendChild（item））；

您可以将卡存储在临时阵列中并检查其长度。比如：

{
const populateSlide=卡片=>{
控制台日志（卡片）
}
常量卡片=[1,2,3,4,5,6,7,8,9]；
让cardsTriple=[]；//临时数组
卡片。forEach（卡片=>{
cardsTriple.push（卡）；//将卡添加到临时阵列
if（cardsTriple.length==3）{
让幻灯片=大众幻灯片（cardsTriple）；
cardsTriple=[]；//重置临时数组
}
});
//可能仍然有可用的卡
if（cardsTriple.长度）{
大众滑（cardsTriple）；
}
}

---

.as控制台包装{top:0；最大高度：100%！important；}

下面是一个解决方案，它将项目分为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('')

函数块（数组，n）{
返回数组（Math.ceil（Array.length/n））.fill（）.map（（u，i）=>Array.slice（i*n，i*n+n））；
}
var卡=[]
对于（变量i=0；i<50；i++）{
卡片。推送（“测试”）；
}
var cardChunks=块（卡片，3）
var slider=cardChunks.map（卡片=>{
返回`${cards.join（“”）}`
}).加入（“”）

对于分块，我使用了以下解决方案：

---

但是你可以在lodash这样的流行库中找到它。

这需要

jQuery

，这在问题中没有提到。这需要

引导，这在问题中没有提到。@Yoshi同意，但这种方法使用的是正确的。：）希望您也同意。我可能会同意，但是没有关于实际用例的更多信息，这太过假设了。