在1，4，7 ...在Javascript中插入div.row（node.js）

我正在尝试使用for循环创建具有某些动态数据的以下HTML结构。在1，4，7 ...在Javascript中插入div.row（node.js）

<div class="row"> 
    <div class="column"> 
    <div class="column"> 
    <div class="column"> 
</div> 

<div class="row"> 
    <div class="column"> 
    <div class="column"> 
    <div class="column"> 
</div>

下面是我已经试过

<% for (var key in video) { %> 

    <% if (key%3 == 0) { %> 
     <div class="row"> 
    <% } %> 

     <div class="column video <%=parseInt(key)+1%>"> 
     ... 
     </div> 

    <% if (key%3 == 0) { %> 
     </div> 
    <% } %> 

    <% } %>

但是这个我越来越

<div class="row> 
    <div class="column"> 
</div> 
<div class="column"> 
<div class="column"> 
<div class="row> 
    <div class="column"> 
</div> 
<div class="column"> 
<div class="column">

我可以做一个理想的方式来包装？

来源

2015-10-17 Seong Lee

为什么不使用表格？ –

因为我使用响应式网格框架来使其响应。 –

因为条件<% if (key%3 == 0) { %>在同一个循环中遇到两次。

在循环之外放置一个起始行和最后一行，然后在该条件下完成一个关闭并打开一个新的div。

<div class="row"> 
<% for (var key in video) { %> 

    <% if (key%3 == 0 && key != 0) { %> 
     </div><div class="row"> 
    <% } %> 

     <div class="column video <%=parseInt(key)+1%>"> 
     ... 
     </div> 

    <% } %> 
</div>

来源

2015-10-17 13:12:18 Wobbles

谢谢。它的效果很好。我没有想到这种方法。 –

<div class="row"></div>的打开和关闭标签的排序需要互换。

条件是确保当key = 0，结束标记将不会插入，并且当它到达最后key时，最后一行将只有一个结束标记。

<% for (var key in video) { %> 

    <% if (key%3 == 0 && key!=0) { %> 
     </div> 
    <% } %> 

     <div class="column video <%=parseInt(key)+1%>"> 
     ... 
     </div> 

    <% if (key%3 == 0) { %> 
     <div class="row"> 
    <% } %> 

<% } %>

来源

2015-10-17 13:12:56 Ryan

我只选择了其他答案，因为它更简单。谢谢你，你的工作也很棒。 –

在1，4，7 ...在Javascript中插入div.row（node.js）

回答

相关问题