Twig,添加第一个和最后一个类

FMa*_*008 47 php symfony twig

假设我有一个这样的for循环:

{% for elem in arrMenu %}
    <div class="topmenu-button">
        <a href="{{ elem.url }}">{{ elem.name }}</a>
    </div>
{% endfor %}
Run Code Online (Sandbox Code Playgroud)

在那种形式,它会呈现如下:

<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>
Run Code Online (Sandbox Code Playgroud)

twig如何帮助我添加div的第一个和最后一个类,以便我得到如下结果:

<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>
Run Code Online (Sandbox Code Playgroud)

Ken*_*ins 110

您可以使用"特殊变量" loop.firstloop.last您想要的.

链接

{% 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 %}
Run Code Online (Sandbox Code Playgroud)

编辑:根据您对"一个案例"的关注程度,您可能需要这样的解决方案.

{% 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 %}
Run Code Online (Sandbox Code Playgroud)


gre*_*emo 8

由于循环不能firstlast同时,我宁愿不使用elseif和写(干 - 如果你topmenu-button将来必须改变怎么办?):

{% 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 %}
Run Code Online (Sandbox Code Playgroud)

或者更简洁:

{% 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 %}
Run Code Online (Sandbox Code Playgroud)

编辑:这样你就可以在class属性中获得一些额外的空格(这是非常好的顺便说一下). Edit2:这不会处理1元素数组(第一个=最后一个)

  • 在再次看到这个问题之后,我认为我们都错了.我们忘记了"一个"的情况,你可以在那里使用`class ="topmenu-button first last".鉴于增加的复杂性,我认为我最好由`merge`过滤器处理并将其分解为它自己的变量,类似于你的做法.我已经更新了我的答案,WDYT? (2认同)