Domanda Ramoscello, aggiungi prima e ultima classe


Diciamo che ho un ciclo for come questo:

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

In questa forma, renderebbe qualcosa come:

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

In che modo twig può aiutarmi ad aggiungere la prima e l'ultima classe al div, in modo da ottenere un risultato simile a:

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

44
2017-10-20 14:29


origine


risposte:


Puoi usare le "variabili speciali" loop.first e loop.last per quello che vuoi

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

EDIT: a seconda di quanto ti preoccupi del "caso unico", potresti avere bisogno di una soluzione come questa.

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

96
2017-10-20 14:38



Poiché un ciclo non può essere first e last allo stesso tempo, preferirei non usarlo elseif e scrivi (ASCIUTO - cosa succede se devi cambiare topmenu-button in 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 più 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 %}

modificare: in questo modo otterrai alcuni spazi in più class attributo (è perfettamente bene btw). Edit2: questo non gestirà l'array di 1 elemento (primo = ultimo)


8
2017-10-20 20:36



Se si tratta di gestire l'attributo di classe di un tag, una condizione ternaria sarebbe meglio.

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

2
2017-12-06 10:12



Lo uso nel modello di visualizzazioni Drupal 8. Grazie per "elseif", se hai solo 1 elemento, quindi il primo elemento non ottiene mai l'ultima 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
2018-03-01 14:30