javascript - 仅更改 for 循环中第一行的列布局

Question

我有一个包含视频/图像内容的网页，我让它们每行显示四个。

我想将第一行设为具有不同列配置的特色部分，如下所示。

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

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

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

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

          ...

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

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

Answer 1

假设您的 CSS 设置正确，这样 <figure>具有类的元素 featured获得正确的双倍宽度

<ul>
    <li>
    <% Object.keys(data).forEach(function(key) { %>
        <% if ((key + 1)%4 == 0) { %>
            </li><li>
        <% } %>
        <figure <% if (key == 0) { %> class="featured" <% } %> >

          ...

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