我有一个应用程序脚本,可以从 Google 表格动态创建内容,将内容加载到 Bootstrap 网格组件中。
虽然代码确实可以正常工作,但我需要满足多行的需求,如下所述。
代码的简化版本是:
<? for (var i=0 ; i <lastRow; ++i) { ?>
<?if(getNSW[i] != "" && getNSW[i] != "TOTAL") {?>
<div class="col-md-4">
<!-- output -->
</div>
</div><? }} ?>
我的目标是将创建的每第 3 个 col div 放入一个新的“行”div。
输出会是这样的:
<div class="row">
<div class="col-md-4"><!-- content --></div>
<div class="col-md-4"><!-- content --></div>
<div class="col-md-4"><!-- content --></div>
</div>
<div class="row">
<div class="col-md-4"><!-- content --></div>
<div class="col-md-4"><!-- content --></div>
<div class="col-md-4"><!-- content --></div>
</div>
显然我需要某种 for 循环来计算 cols 等......我只是为正确的语法画了一个空白。
最佳答案
试试这个:
var output = "<div class='row'>";
for(var i=0;i<lastRow;i++)
{
if((i%3)==0)
{
output += "</div><div class='row'>" + "<div class='col-md-4'><!-- content --></div>";
}
else
{
output += "<div class='col-md-4'><!-- content --></div>";
}
}
if((i%3)!=0)
{
output += "</div><div class='row'>";
}
上面的代码所做的是,每第 3 次迭代插入
</div><div class="row">
它终止了之前的 div 标签并开始了一个新的 row。
附言。您需要为要显示的内容添加逻辑。
关于javascript - 在 Bootstrap/HTML 中使用 for 循环动态创建行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41840975/