Веточка, добавить первый и последний класс
Вопрос
Допустим, у меня есть петля, как это:
{% 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>
Решение
Вы можете использовать «Специальные переменные» 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 %}
РЕДАКТИРОВАТЬ: В зависимости от того, как сильно вы заботитесь о «одного случая», вам может понадобиться такое решение.
{% 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 %}
Другие советы
Поскольку петля не может быть 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-элементный массив (первый = последний)
Если это будет управлять атрибутом класса тега, тройное условие будет лучше.
<span class="topmenu-button {{ (loop.first) ? 'first' : '' }}">{{ item.text }}</span>
Я использую это в шаблоне Drupal 8 просмотров. Спасибо за «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 %}