使用 Jinja 循环项目，每 5 个项目后添加 div

Question

问题

我有一个包含 100 个高尔夫球场的列表，我希望插入一个 div，其中包含每五个球场之后的广告图片。我该怎么做呢？

更新 #1

content.html（修订，最新版本）

• 由于 leovp 的原因，我已经更新了我的原始代码 sn-p 建议在下面编辑。我无法仅显示 {% if content.featured == "Test" %} 并且想知道如何关闭我的 if-else 语句。

      {% for content in COPY.courses %}
              <div class="course course--featured">
                  <a href=""><img src="" class="course__image image--region"></a>
  
                  <div class="course__inner">
                      <div class="course__wrapper">
                          {% if content.state == "MO" %}
                              <p class="course__state">Missouri</p>
                          {% elif content.state == "IL" %}
                              <p class="course__state">Missouri</p>
                          {% endif %}
                      </div>
  
                      <div class="course__wrapper">
                          <a href=""><p class="course__name name--region">{{ content.name }}</p></a>
                      </div>
                      <p class="course__desc">{{ content.description }}</p>
                  </div>
              </div>
  
      {% if loop.index % 5 == 0 %}
      <div class="advertising advertising--inline">
          <div class="ad ad--rect">
  
              <div class="text-center hidden-xs">
                  <div id="fixed-leaderboard-region-top"
                      class="dfp-ad"
                      data-dfp-custom-pos="fixed-leaderboard-top, htf"
                      data-dfp-size="[728,90]">
                  </div>
              </div>
  
              <div class="text-center hidden-sm hidden-md hidden-lg">
                  <div id="fixed-leaderboard-region-top-mobile"
                      class="dfp-ad"
                      data-dfp-custom-pos="fixed-leaderboard-top, htf"
                      data-dfp-size="[320,50]">
                  </div>
              </div>
          </div>
      </div>
      {% endif %}
      {% endfor %}
  </div>
  

content.html（以前的旧版本比较）

• 我已经研究过使用 Stack Overflow question 中的 batch 看起来很相似，但我不确定这是否能解决我的问题？

  {% for content in COPY.courses %} {% if content.featured == "测试" %}

  <div class="course__inner">
      <div class="course__wrapper">
          {% if content.state == "MO"%}
          <p class="course__state">Missouri</p>
          {% elif content.state == "IL" %}
          <p class="course__state">Illinois</p>
          {% endif %}
      </div>
  
      <div class="course__wrapper">
          <a href=""><p class="course__name name--home">{{ content.name }}</p></a>
      </div>
      <p class="course__desc">{{ content.description }}</p>
  </div>
  

  {% endif %} {% endfor %}

Answer 1

在迭代时，你可以获取当前索引并检查它是否可以被 5 整除：

{% set count = 0 %}
{% for content in COPY.courses %}
{% if content.featured == "Test" %}
<div class="course course--featured">
    <a href=""><img src="" class="course__image image--home"></a>
    [...]
    </div>
</div>

{% set count = count + 1 %}
{% if count % 5 == 0 %}
    <!-- additional content once every 5 courses -->
{% endif %}
{% endif %}
{% endfor %}

注意：此方法在 2.10 版之后不再有效。

详情见： How to increment a variable on a for loop in jinja template?