我想在特定条件下在 jinja2 模板中使用 for 循环

Question

我刚开始学习python。我想在 Jinja2 模板中添加 for 循环，有一个条件我有 2 个部分，它们的位置是左右不同的div(div 用于左侧部分，div 用于右侧部分(，如您在图像和代码中看到的那样。那么如何在这种情况下添加 for 循环，以便各部分自动左右对齐。

<div class="timelines-container mbr-pt-4 mbr-white">
<!--1 Left-->
<div class="timeline-element separline mbr-pb-4">
<div class="timeline-wrap mbr-flex">
<div class="timeline-img-wrap mbr-col-sm-12 mbr-col-md-6 mbr-flex">
<div class="timeline-img-panel">
<amp-img alt="" class="Intellemo-loader" height="170" layout="responsive" src="https://cdn.pixabay.com/photo/2015/07/17/22/43/student-849825__340.jpg" width="250">
<div class="placeholder" placeholder="">
<div class="mobirise-spinner">
<em></em>
<em></em>
<em></em>
</div></div>
<a href="top-5-marketing-reporting-tools.html"></a>
<amp-img alt="Marketing-Reporting-Tools" class="Intellemo-loader" fallback height="170" layout="responsive" src="https://cdn.pixabay.com/photo/2015/07/17/22/43/student-849825__340.jpg" width="250">
<div class="placeholder" placeholder="">
<div class="mobirise-spinner">
<em></em>
<em></em>
<em></em>
</div></div>
<a href="top-5-marketing-reporting-tools.html"></a>
</amp-img></amp-img>
<div class="timeline-text-content">
<a href="top-5-marketing-reporting-tools.html">
<h4 class="mbr-timeline-title mbr-black mbr-fonts-style display-2 mbr-pb-2" style="padding-bottom: 0px;">Top 5 Marketing Reporting Tools</h4></a>
<p class="mbr-timeline-text mbr-fonts-style display-12 mbr-timeline-text mbr-black">Are you one amongst those digital marketers who feel creating reports is one of the most boring and tedious tasks or somebody...</p>
</div>
</div>
</div>
<div class="timeline-item-wrap mbr-col-sm-12 mbr-col-md-6 mbr-flex mbr-column align-left">
</div>
<span class="iconBackground"></span>
</div>
</div>

<!--2 Right-->
<div class="timeline-element separline mbr-pb-4">
<div class="timeline-wrap mbr-flex mbr-row-reverse">
<div class="timeline-img-wrap mbr-col-sm-12 mbr-col-md-6 mbr-flex">
<div class="timeline-img-panel">
<amp-img alt="CRM-Benefits" class="Intellemo-loader" height="170" layout="responsive" src="https://cdn.pixabay.com/photo/2015/07/17/22/43/student-849825__340.jpg" width="250">
<div class="placeholder" placeholder="">
<div class="mobirise-spinner">
<em></em>
<em></em>
<em></em>
</div></div>
<a href="crm-software-benefits.html"></a>
<amp-img alt="CRM-Benefits" class="Intellemo-loader" fallback height="170" layout="responsive" src="https://cdn.pixabay.com/photo/2015/07/17/22/43/student-849825__340.jpg" width="250">
<div class="placeholder" placeholder="">
<div class="mobirise-spinner">
<em></em>
<em></em>
<em></em>
</div></div>
<a href="crm-software-benefits.html"></a>
</amp-img></amp-img>
<div class="timeline-text-content">
<a href="crm-software-benefits.html">
<h4 class="mbr-timeline-title mbr-black mbr-fonts-style display-2 mbr-pb-2" style="padding-bottom: 0px;">CRM Benefits Explained</h4></a>
<p class="mbr-timeline-text mbr-fonts-style display-12 mbr-timeline-text mbr-black">Explained Better Sales Prospects Follow the quality leads by converting opportunity and reducing the sales cycle...</p>
</div>
</div>
</div>
<div class="timeline-item-wrap mbr-col-sm-12 mbr-col-md-6 mbr-flex mbr-column">
</div>
<span class="iconBackground"></span>
</div>
</div>
</div>

左右部分的屏幕截图

Answer 1

#To add for loop in jinja2 syntax as follows:-
{% for post in posts%}
#content
{%endfor%}

Answer 2

看起来您有一个项目列表，并且您希望呈现左侧具有偶数索引 (0， 2， 4,..( 的项目和右侧具有奇数索引 (1， 3， 5,..( 的项目。您可以制作 2 个循环并使用 jinja 甚至测试来过滤每个循环的项目：

<div class="left-column">
<!-- For items with 0, 2, 4,.. indexes -->
{% for item in item_list %}
{% if loop.index0 is even %}
{{ item }}
{% endif %}
{% endfor %}
</div>
<div class="right-column">
<!-- For items with 1, 3, 5,.. indexes -->
{% for item in item_list %}
{% if loop.index0 is not even %}
{{ item }}
{% endif %}
{% endfor %}
</div>

loop是一个特殊的 jinja 变量，可在循环中使用。它可用于各种有用的操作，例如获取电流环路索引，检查它是第一个还是最后一个环路等。