javascript - for 循环中第一行的特殊列布局

标签 javascript node.js

我有一个网页,每行显示 4 个图像。

我想将第一行设置为特殊行,其列配置与其他行不同,如下所示。

enter image description here

因此这个特殊行将有 3 列,其中第一列的尺寸较大。

以下是我目前拥有的和 <li>代表一行且 <figure>代表一列。

 <ul>
    <li>
    <% Object.keys(data).forEach(function(key) { %>

        <% if (key%4 == 0 && key != 0) { %>
            </li><li>
        <% } %>
        <figure>

          ...

        </figure>
    <% }) %>
</ul>

我就是无法在循环中添加这个条件。

最佳答案

最好用纯js文件编写,但无论如何,你能检查一下吗?

<% Object.keys(data).forEach(function(key) { %>

    <% if (key === 0) { %>
        <figure class="double-size">

          ...

        </figure>
    <% } else { %>
        <% if ((key+1)%4 == 0 && key != 0) { %>
            </li><li>
        <% } %>

        <figure>

          ...

        </figure>
    <% } %>

<% }) %>

关于javascript - for 循环中第一行的特殊列布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34632302/

相关文章:

javascript - Angular 列表引用在项目删除时未更新

javascript - Bootstrap : modal. js v3.2.0 嵌套弹窗

node.js - 如何在 Mongoose 中的虚拟对象中填充对象

node.js - gulp-exec 子进程立即关闭

javascript - 为什么我的 JavaScript 会抛出““No ' Access-Control-Allow-Origin' header is present on the requested resources”错误,而 Postman 却没有?

node.js - 使用 Dialogflow 和 Webhook 收听广播

javascript - loglevel-plugin-remote 不断向 API 发送相同的请求

javascript - 使用 slice() 后,检索包含该切片内某些内容的元素数

javascript - 并行开发的目录结构: Dart and Javascript

javascript - puppeteer 师 - 错误 : Evaluation failed: ReferenceError: TABLE_ROW_SELECTOR is not defined