Javascript 为每个循环生成html，每4个循环生成一个结束标记

我正在尝试生成以下html：

<div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
</div>
<div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
</div>
<div class="row">
    <div class="col-md-3"></div>
</div>

因此，我尝试了以下方法：

var response='[{“id”：7}，{“id”：10}，{“id”：15}，{“id”：11}，{“id”：14}，{“id”：9}，{“id”：8}，{“id”：12}，{“id”：1}'
var json=$.parseJSON（响应）；
var add_html=“”；
$（json）.each（函数（i，val）{
如果（i%4==0）{
添加_html+=“”；
}
add_html=add_html+“”；
如果（i%4==0）{
add_html=add_html+“”；
}
});
/*
如果（i%4！=1）{
add_html=add_html+“”；
}
*/
console.log（添加html）

---

为了实现您的目标，您可以将原始数组批处理为4组，然后使用

map（）

迭代该数组并创建所需的HTML：

var json=$.parseJSON（'[{id:7}，{id:10}，{id:15}，{id:11}，{id:14}，{id:9}，{id:8}，{id:12}，{id:1}'）；
设perChunk=4；
json=json.reduce（（all，one，i）=>{
常数ch=数学楼层（i/Percunk）；
全部[ch]=[].concat（（全部[ch]|【】），一个）；
全部归还
}, [])
让html=json.map（chunk=>`${chunk.map（item=>``.）.join（“”）}`.）.join（“”）；
log（html）
为了实现您的目标，您可以将原始数组批处理为4组，然后使用
map（）
迭代该数组并创建所需的HTML：


var json=$.parseJSON（'[{id:7}，{id:10}，{id:15}，{id:11}，{id:14}，{id:9}，{id:8}，{id:12}，{id:1}'）；
设perChunk=4；
json=json.reduce（（all，one，i）=>{
常数ch=数学楼层（i/Percunk）；
全部[ch]=[].concat（（全部[ch]|【】），一个）；
全部归还
}, [])
让html=json.map（chunk=>`${chunk.map（item=>``.）.join（“”）}`.）.join（“”）；
log（html）
试试下面的方法。并用注释检查更改

代码中有两个更改

您需要用
i%4==0
打开
行
div，然后用
i%4==3
关闭它
每次循环完成后，您应该检查
（json.length-1）%4！=3
然后需要添加


var response='[{“id”：7}，{“id”：10}，{“id”：15}，{“id”：11}，{“id”：14}，{“id”：9}，{“id”：8}，{“id”：12}，{“id”：1}'
var json=$.parseJSON（响应）；
var add_html=“”；
$（json）.each（函数（i，val）{
如果（i%4==0）{
添加_html+=“”；
}
add_html=add_html+“”；
//更改1-更新此处的条件以与3进行比较
如果（i%4==3）{
添加_html+=“”；
}
});
//更改2-添加附加条件
如果（（json.length-1）%4！=3）{
添加_html+=“”；
}
console.log（添加html）
试试下面的方法。并用注释检查更改

代码中有两个更改

您需要用
i%4==0
打开
行
div，然后用
i%4==3
关闭它
每次循环完成后，您应该检查
（json.length-1）%4！=3
然后需要添加


var response='[{“id”：7}，{“id”：10}，{“id”：15}，{“id”：11}，{“id”：14}，{“id”：9}，{“id”：8}，{“id”：12}，{“id”：1}'
var json=$.parseJSON（响应）；
var add_html=“”；
$（json）.each（函数（i，val）{
如果（i%4==0）{
添加_html+=“”；
}
add_html=add_html+“”；
//更改1-更新此处的条件以与3进行比较
如果（i%4==3）{
添加_html+=“”；
}
});
//更改2-添加附加条件
如果（（json.length-1）%4！=3）{
添加_html+=“”；
}
console.log（添加html）
var-response='[{“id”：7}，{“id”：10}，{“id”：15}，{“id”：11}，{“id”：14}，{“id”：9}，{“id”：8}，{“id”：12}，{“id”：1}'
var json=json.parse（响应）；
const add_html=json.map（（）=>''）.reduce（（pre，cur）=>{
const arr=pre[pre.length-1]；
如果（arr.length>=4）{
预推（[cur]）
}否则{
arr.push（当前）；
}
返回预处理；
}，[[]]）.map（项=>`${item.join（“”）}`）。join（“”）
var response='[{“id”：7}，{“id”：10}，{“id”：15}，{“id”：11}，{“id”：14}，{“id”：9}，{“id”：8}，{“id”：12}，{“id”：1}'
var json=json.parse（响应）；
const add_html=json.map（（）=>''）.reduce（（pre，cur）=>{
const arr=pre[pre.length-1]；
如果（arr.length>=4）{
预推（[cur]）
}否则{
arr.push（当前）；
}
返回预处理；
}，[[]]）.map（项=>`${item.join（“”）}`）。join（“”）
添加html的输出是什么？您检查过循环是否运行了吗？使用array\u chunks函数add\u html的输出是什么？你检查过循环是否运行了吗？使用数组块函数你是对的-我用更好的方法更新了它你是对的-我用更好的方法更新了它
        var response = '[{"id":7},{"id":10},{"id":15},{"id":11},{"id":14},{"id":9},{"id":8},{"id":12},{"id":1}]'
        var json = JSON.parse(response);
        const add_html = json.map(() => '<div class="col-md-3"></div>').reduce((pre, cur) => {
            const arr = pre[pre.length - 1];
            if (arr.length >= 4) {
                pre.push([cur])
            } else {
                arr.push(cur);
            }
            return pre;
        }, [[]]).map(item => `<div class="row">${item.join('')}</div>`).join('')