web-dev-qa-db-fra.com

Twig, ajoutez la première et la dernière classe

Disons que j'ai une boucle for comme celle-ci:

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

Sous cette forme, cela rendrait quelque chose comme:

<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>

Comment peut twig m'aider à ajouter les première et dernière classes de la div, de sorte que j'aurais un résultat comme:

<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>
phpsymfonytwig
47
FMaz008

Vous pouvez utiliser les "variables spéciales" loop.first et loop.last pour ce que vous voulez.

LIEN 

{% 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: selon combien vous vous souciez du "cas unique", vous pourriez avoir besoin d'une solution comme celle-ci.

{% 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 %}
110
Kendall Hopkins

Puisqu'une boucle ne peut pas être first et last en même temps, je préférerais ne pas utiliser elseif et écrire (DRY - si vous devez changer topmenu-button dans le futur?):

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

ou plus concis:

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

Edit: de cette façon, vous obtiendrez des espaces supplémentaires dans l'attribut class (c'est parfaitement bien btw). Edit2: cela ne gérera pas le tableau à 1 élément (premier = dernier)

8
gremo

Si c'est pour gérer l'attribut de classe d'une balise, une condition ternaire serait mieux.

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

J'utilise ceci dans Drupal 8 vues modèle. Merci pour 'elseif', si vous n'avez qu'un seul élément, alors le premier élément n'obtiendra jamais la 'dernière' classe:

{% 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 %}
0
Gódi Péter