Twig, добавьте первый и последний класс

Скажем, у меня есть цикл for следующим образом:

{% for elem in arrMenu %}
    <div class="topmenu-button">
        <a href="{{ elem.url }}">{{ elem.name }}</a>
    </div>
{% endfor %}

В этой форме он будет выглядеть примерно так:

<div class="topmenu-button"><a href="url">name</a></div>
<div class="topmenu-button"><a href="url">name</a></div>
<div class="topmenu-button"><a href="url">name</a></div>
<div class="topmenu-button"><a href="url">name</a></div>

Как twig поможет мне добавить первый и последний классы в div, так что у меня будет результат вроде:

<div class="topmenu-button first"><a href="url">name</a></div>
<div class="topmenu-button"><a href="url">name</a></div>
<div class="topmenu-button"><a href="url">name</a></div>
<div class="topmenu-button last"><a href="url">name</a></div>

Ответ 1

Вы можете использовать "специальные переменные" loop.first и loop.last для того, что вы хотите.

ССЫЛКА

{% for elem in arrMenu %}
    {% if loop.first %}
    <div class="topmenu-button first">        
    {% elseif loop.last %}
    <div class="topmenu-button last">        
    {% else %}
    <div class="topmenu-button">        
    {% endif %}
        <a href="{{ elem.url }}">{{ elem.name }}</a>
    </div>
{% endfor %}

EDIT: в зависимости от того, насколько вы заботитесь о "одном случае", вам может понадобиться такое решение.

{% for elem in arrMenu %}
    {% set classes = ["topmenu-button"] %}
    {% if loop.first %}{% set classes = classes|merge(["first"]) %}{% endif %}
    {% if loop.last %}{% set classes = classes|merge(["last"]) %}{% endif %}
    <div class="{{ classes|join(" ") }}">        
        <a href="{{ elem.url }}">{{ elem.name }}</a>
    </div>
{% endfor %}

Ответ 2

Поскольку цикл не может быть first и last в то же время, я бы предпочел не использовать elseif и написать (DRY - что делать, если вам нужно изменить topmenu-button в будущем?):

{% for elem in arrMenu %}
    {% set append %}
        {% if loop.first %}first{% endif %}
        {% if loop.last %}last{% endif %}
    {% endset %}
    <div class="topmenu-button {{ append }}">
        <a href="{{ elem.url }}">{{ elem.name }}</a>
    </div>
{% endfor %}

или более кратким:

{% for elem in arrMenu %}
    <div class="topmenu-button {% if loop.first %}first{% endif %} {% if loop.last %}last{% endif %}">
        <a href="{{ elem.url }}">{{ elem.name }}</a>
    </div>
{% endfor %}

Изменить: таким образом вы получите дополнительные пробелы в атрибуте class (это отлично подходит кстати). Edit2: это не будет обрабатывать 1-элементный массив (first = last)

Ответ 3

Если для управления атрибутом класса тега, тройное условие будет лучше.

<span class="topmenu-button {{ (loop.first) ? 'first' : '' }}">{{ item.text }}</span>