Question

我有一个应用程序脚本，可以动态创建Google表格中的内容，将内容加载到Bootstrap网格组件中。

虽然代码可以正常工作，但我需要满足多行，如下所述。

代码的简化版本是：

<? for (var i=0 ; i <lastRow; ++i) { ?>
<?if(getNSW[i] != "" && getNSW[i] != "TOTAL") {?>
        <div class="col-md-4">
                <!-- output -->
            </div>
        </div><? }} ?>

我的目标是为每个创建的第3个div，将它们放入一个新的＆＃34;行＆＃34;格。

输出类似于：

<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等...我只是为正确的语法画一个空白。

Answer 1

试试这个：

    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 标记，并开始新的行。

PS。您需要为要显示的内容添加逻辑。

Answer 2

使用嵌套循环

<?php
    for($i=0;$i<rows;$i++){
        echo '<div class = "row">'
        for($j=0;$j<3;$j++){
            if(getNSW[i] != "" && getNSW[i] != "TOTAL"){
?>
                <div class="col-md-4"><!--content--></div>
<?php
            }
        }
        echo '</div>'
    }
?>

Answer 3

使用Django模板，您可以轻松地做到这一点：

<div class="row">

    {% for item in items %}
    <div class="col-md-3">{{ item }}</div>

        <!-- if last column in row -->
        {% if forloop.counter|divisibleby:"4" and not forloop.last %}
        </div><div class="row">
        {% endif %}

    {% endfor %}

</div>

在Bootstrap / HTML中使用for循环动态创建行

3 个答案: