webentwicklung-frage-antwort-db.com.de

Zweig, füge die erste und letzte Klasse hinzu

Nehmen wir an, ich habe eine for-Schleife wie diese:

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

In dieser Form würde es ungefähr so ​​aussehen:

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

Wie kann twig mir helfen, die erste und letzte Klasse der Div hinzuzufügen, so dass ich ein Ergebnis wie folgt hätte:

<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

Sie können die "Sondervariablen" loop.first und loop.last für was du willst.

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

BEARBEITEN: Je nachdem, wie sehr Sie sich für den "einen Fall" interessieren, benötigen Sie möglicherweise eine Lösung wie diese.

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

Da eine Schleife nicht gleichzeitig first und last sein kann, würde ich es vorziehen, elseif nicht zu verwenden und (DRY - was ist, wenn Sie topmenu-button in ändern müssen Zukunft?):

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

oder prägnanter:

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

Bearbeiten: Auf diese Weise erhalten Sie einige zusätzliche Leerzeichen im class Attribut (es ist übrigens vollkommen in Ordnung). Edit2: Dies wird kein 1-Element-Array behandeln (first = last)

8
gremo

Wenn das Klassenattribut eines Tags verwaltet werden soll, ist eine ternäre Bedingung besser.

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

Ich benutze dies in Drupal 8 Ansichten Vorlage. Danke für 'elseif', wenn Sie nur 1 Artikel haben, dann bekommt der erste Artikel nie die 'letzte' Klasse:

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