Jinja2 / Nunjucks：对循环元素的不同处理

Question

我有一个列表：

list = [a, b, c, 1, 2, 3, a, b, c, 1, 2, 3, a, b, c, 1, 2, 3]

我想将其显示为 table，其中每第 4、5 和 6 个元素都以自己的方式设置样式，例如：

<td><span class="label label-info">1</span></td>
<td><span class="label label-danger">2</span></td>
<td><span class="label label-primary">3</span></td>

我将列表批处理成 6er 行以将其显示为 table，如下所示：

{%- for row in list|batch(6, '&nbsp;') %}
    <tr>
    {%- for column in row %}
        <td>{{ column }}</td>
    {%- endfor %}
    </tr>
{%- endfor %}

但是我不知道如何做上面描述的事情。有人有想法吗？

Answer 1

您可以使用 loop.index 来判断循环中的迭代次数：

{%- for row in list|batch(6, '&nbsp;') %}
    <tr>
    {%- for column in row %}
        <td>
            {%- if loop.index == 4 %}<span class="label label-info">{% endif -%}
            {%- if loop.index == 5 %}<span class="label label-danger">{% endif -%}
            {%- if loop.index == 6 %}<span class="label label-primary">{% endif -%}
            {{ column }}
            {%- if loop.index in [4, 5, 6] %}</span>{% endif -%}
        </td>
    {%- endfor %}
    </tr>
{%- endfor %}

Answer 2

如果不需要span-wrapper，代码可以写成

{% set classes = {4: 'label label-info', 5: 'label label-danger', 6: 'label label-primary'} %}
{%- for row in list | batch(6, '&nbsp;') %}
    <tr>
    {% for column in row %}
        <td class = "{{classes[loop.index]}}">{{column}}</td>
    {% endfor %}
    </tr>
{% endfor %}

P.S。恕我直言，{%- 和 -%} 堵塞了代码。更好的方法是在页面生成结束时使用 html 美化器。如果您使用 Express，请参阅 express-beautify 中间件。

Jinja2 / Nunjucks：对循环元素的不同处理

Jinja2 / Nunjucks: Different treatment to for-loop elements

jinja2

nunjucks

templating-engine