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

4 回答

• 8

  您可以根据需要使用"special variables" loop.first 和 loop.last .

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

  编辑：根据您对“一个案例”的关注程度，您可能需要这样的解决方案 .

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

  回复于 2024-04-28T21:25:18+08:00
• 2

  由于循环不能同时 first 和 last ，我宁愿不使用 elseif 并写（DRY - 如果你将来必须更改 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 %}
  

  或者更简洁：

  {% 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 ：这样你就可以在 class 属性中得到一些额外的空格（这是非常好的顺便说一下） . Edit2 ：这不会处理1元素数组（第一个=最后一个）

  回复于 2024-04-28T21:25:18+08:00
• 0

  如果要管理标签的类属性，则三元条件会更好 .

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

  回复于 2024-04-28T21:25:18+08:00
• 99

  我在Drupal 8视图模板中使用它 . 感谢'elseif'，如果你只有1个项目，那么第一个项目永远不会得到'last'类：

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

  回复于 2024-04-28T21:25:18+08:00