php - lorem - twig needs_environment
Twig, agrega la primera y la Ășltima clase (4)
Digamos que tengo un ciclo for como este:
{% for elem in arrMenu %}
<div class="topmenu-button">
<a href="{{ elem.url }}">{{ elem.name }}</a>
</div>
{% endfor %}
En esa forma, representaría algo así como:
<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>
¿Cómo puede ramita ayudarme a agregar la primera y la última clase al div, para que tenga un resultado como:
<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>
Como un ciclo no puede ser el first
y el last
al mismo tiempo, preferiría no usar elseif
y escribir (DRY - ¿y si tiene que cambiar topmenu-button
en el futuro?):
{% 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 %}
o más conciso:
{% 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 %}
Editar : de esta manera obtendrá algunos espacios adicionales en el atributo de class
(está perfectamente bien por cierto). Edit2 : esto no manejará la matriz de 1 elemento (first = last)
Puede utilizar el loop.first
"variables especiales" loop.first
y loop.last
para lo que desee.
{% 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 %}
EDITAR: dependiendo de cuánto te importe el "caso único", es posible que necesites una solución como esta.
{% 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 %}
Si se trata de administrar el atributo de clase de una etiqueta, una condición ternaria sería mejor.
<span class="topmenu-button {{ (loop.first) ? ''first'' : '''' }}">{{ item.text }}</span>
Yo uso esto en la plantilla de Drupal 8 views. Gracias por ''elseif'', si solo tienes 1 elemento, entonces el primer elemento nunca obtiene la ''última'' clase:
{% 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 %}