使用Jinja循环使用项目,在每第5项后添加div

时间:2017-03-17 20:50:10

标签: python loops jinja2

问题

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

更新#1

content.html(修订版,最新版)

  • 我已经更新了我的原始代码段,因为它不属于leovp' s 建议编辑如下。我只是在显示{% 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 batch中的question看似相似,但我不确定这是否解决了我的问题?

    {%表示COPY.courses%} {%if content.featured ==&#34; Test&#34; %}

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

1 个答案:

答案 0 :(得分:2)

迭代时,您可以获取当前索引并检查它是否可以被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 %}