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

Question

Допустим, у меня есть цикл 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>

Как веточка может помочь мне добавить первый и последний класс в 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>

Answer 1

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

LINK

{% 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 %}

РЕДАКТИРОВАТЬ: в зависимости от того, сколькоВы заботитесь об «одном случае», вам может понадобиться решение, подобное этому.

{% 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 %}

Answer 2

Поскольку цикл не может быть first и last одновременно, я бы предпочел не использовать elseif и писать (СУХОЙ - что делать, если вам придется изменить 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 элемента (первый = последний)

Answer 3

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

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

Answer 4

Я использую это в шаблоне Drupal 8 views. Спасибо за elseif, если у вас есть только 1 предмет, тогда первый предмет никогда не получит последний класс:

{% for row in rows %}
    {% set parity = cycle(['odd', 'even'], loop.index0) %}
    {% set row_classes = [ default_row_class ? 'views-row', ] %}    

    <div class="views-prerow {{parity}}{% if loop.first %} first{% elseif loop.last %} last{% endif %}">
        <div{{ row.attributes.addClass(row_classes) }}>
            {{ row.content }}
        </div>
    </div>
{% endfor %}