Let's say I have a for loop like this:
{% for elem in arrMenu %}
<div class="topmenu-button">
<a href="{{ elem.url }}">{{ elem.name }}</a>
</div>
{% endfor %}
In that form, it would render something like:
<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>
How can twig help me to add first and last classes the the div, so that I would have a result like:
<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>
You can use the "special variables" loop.first
and loop.last
for what you want.
{% 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: depending how much you care about the "one case", you might need a solution like this.
{% 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 %}