Symfony中如何在Twig循环中实现div布局交替显示？

我来帮你搞定这两个Twig循环的需求——修正交替布局的显示问题，以及实现每两次循环显示一次特定div类，用Twig内置的loop变量就能轻松实现：

一、修复交替布局的显示问题 #

你原代码里只让第一个和最后一个项保持左文右图，中间项都是左图右文，这应该不是你想要的逐项交替布局（第1个左文右图、第2个左图右文、第3个左文右图……）。我们可以利用循环索引的奇偶性来控制列的顺序：

{% for uneInfo in lesInfos %}
  <div class="row featurette ">
    {# 奇数项（第1、3、5...个）文本在左，偶数项文本在右 #}
    <div class="col-md-7 {% if loop.index is odd %} order-md-1 {% else %} order-md-2 {% endif %}">
      <h2 class="featurette-heading"> {{ uneInfo.title }} </h2>
      <p class="lead">{{ uneInfo.description }}</p>
    </div>
    {# 奇数项图片在右，偶数项图片在左，和文本列顺序对应 #}
    <div class="col-md-5 {% if loop.index is odd %} order-md-2 {% else %} order-md-1 {% endif %} ">
      <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
    </div>
  </div>
  <hr class="featurette-divider">
{% endfor %}

这里用到了loop.index（从1开始的循环索引），通过is odd/is even判断奇偶性，从而切换order-md-*类的顺序，实现逐项交替的左右布局。

二、实现每两次循环显示一次特定div类 #

如果你想每两个循环项就显示一次某个div，可以根据循环索引的倍数关系来判断，分两种常见场景：

场景1：在每两个项之后插入特定div（比如第2、4、6...个项末尾） #

{% for uneInfo in lesInfos %}
  {# 先保留上面修正后的交替布局代码 #}
  <div class="row featurette ">
    <div class="col-md-7 {% if loop.index is odd %} order-md-1 {% else %} order-md-2 {% endif %}">
      <h2 class="featurette-heading"> {{ uneInfo.title }} </h2>
      <p class="lead">{{ uneInfo.description }}</p>
    </div>
    <div class="col-md-5 {% if loop.index is odd %} order-md-2 {% else %} order-md-1 {% endif %} ">
      <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
    </div>
  </div>

  {# 每两个项（偶数项）之后显示特定div，同时排除最后一项避免多余 #}
  {% if loop.index is even and not loop.last %}
    <div class="your-special-div-class">
      这里是每两次显示一次的内容
    </div>
  {% endif %}

  <hr class="featurette-divider">
{% endfor %}

场景2：每两个项为一组，在每组开头显示特定div #

如果是想把每两个项当成一组，在每组的第一个项前显示特定div，可以用loop.index0（从0开始的索引）判断：

{% for uneInfo in lesInfos %}
  {# 每两个项的第一个位置（第1、3、5...个项前）显示特定div #}
  {% if loop.index0 is divisible by(2) %}
    <div class="your-special-div-class">
      这是每组（2个项）的开头内容
    </div>
  {% endif %}

  {# 修正后的交替布局代码 #}
  <div class="row featurette ">
    <div class="col-md-7 {% if loop.index is odd %} order-md-1 {% else %} order-md-2 {% endif %}">
      <h2 class="featurette-heading"> {{ uneInfo.title }} </h2>
      <p class="lead">{{ uneInfo.description }}</p>
    </div>
    <div class="col-md-5 {% if loop.index is odd %} order-md-2 {% else %} order-md-1 {% endif %} ">
      <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
    </div>
  </div>
  <hr class="featurette-divider">
{% endfor %}

补充：Twig loop变量常用属性 #

这些属性在循环里非常实用：

• loop.index：当前循环的索引（从1开始）
• loop.index0：当前循环的索引（从0开始）
• loop.even：等价于loop.index is even，判断当前项是否是偶数
• loop.odd：等价于loop.index is odd，判断当前项是否是奇数
• loop.last：判断是否是循环的最后一项
• loop.length：获取循环的总项数

内容的提问来源于stack exchange，提问作者Atsuya