Jinja2 / Nunjucks: различное отношение к элементам петли

Question

У меня есть список:

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

И я хочу показать его в виде таблицы, в которой каждый 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>

Я собираю список в 6 строк, чтобы отобразить его в виде таблицы:

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

Но я понятия не имею, как сделать то, что я описал выше.У кого-нибудь есть идея?

Answer 1

Если вам не нужна span -обёртка, код можно записать как

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

P.S. Имхо, {%- и -%} засоряют код. Лучший способ - использовать html beautifier в конце генерации страницы. Если вы используете Express, см. Промежуточное ПО express-beautify .

Answer 2

Вы можете использовать loop.index, чтобы узнать, на каком числе находится итерация в цикле:

{%- for row in list|batch(6, ' ') %}
    <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 %}