用Jinja遍历项目,每第5个项目后添加div [英] Looping over items with Jinja, adding in div after every 5th item
问题描述
我有100个高尔夫球场的清单,我想插入一个div,其中包含每五个高尔夫球场后的广告图片.我将如何去做?
I have a list of 100 golf courses and I'm looking to insert a div, containing an image for an ad after every fifth course. How would I go about doing this?
-
由于leovp的问题,我已经更新了原始代码段 建议在下面进行编辑.我在仅显示
{% if content.featured == "Test" %}
时遇到了麻烦,并且想知道如何关闭if-else语句.
I've updated my original code snippet because off of leovp's suggested edited below. I'm having trouble showing only
{% if content.featured == "Test" %}
and wondering how I should closing my if-else statement.
{% 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>
I've looked into using
batch
from this Stack Overflowquestion
that seemed similar, but I'm unsure if this solves my problem?
{COPY.courses中内容的%%} {%如果content.featured ==测试"%}
{% for content in COPY.courses %} {% if content.featured == "Test" %}
<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%}
{% endif %} {% endfor %}
推荐答案
在迭代时,您可以获取当前索引并检查它是否可以被5整除:
While iterating, you can get the current index and check if it's divisible by 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版本之后不再有效.
NOTE: This approach no longer works after version 2.10.
有关详细信息,请参见: 如何在for上递增变量循环进入jinja模板?
For detail see: How to increment a variable on a for loop in jinja template?
这篇关于用Jinja遍历项目,每第5个项目后添加div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!