如何在带有树枝的循环末尾添加按钮

Question

更新：我用一个有效的解决方案来回答我的问题。见下文。

我创建了一个显示帖子的循环。每两次迭代都会创建一个新的row。

我的循环围绕这个帖子列表进行迭代。此数组中不考虑该按钮。 但我的问题是我想在最后一列添加一个按钮。

在我的后台选项中，我提供了显示或不显示此按钮的可能性。所以有时候我不需要用这个按钮添加最后一个列。

此外，我需要在两列的每列上添加 col-md-push-2，因为我使用的是 Bootstrap 网格（即使在按钮在后台处于活动状态时也在按钮的列上）。

我写的这段代码运行良好。但我不知道在哪里添加我的按钮。

<div class="group">
    <div class="row">
        {% for post in posts %}
        <div class="col-xs-12 col-md-5 {% if loop.index is even %}col-md-push-2{% endif %}">
            <div class="div-for-my-content">
                Col content
            </div>
            {% if buttonIsActive %}
            <div class="div-for-my-button">
                Button
            </div>
            {% endif %}
        </div>
{% if loop.index % 2 == 0 and not loop.last %}
    </div>
</div>
<div class="group">
    <div class="row">
{% endif %}
        {% endfor %}
    </div>
</div>

我不知道在哪里可以为我的按钮添加代码。我知道我实际上在每一行都有我的按钮:-(

我尝试生成的 html 示例。

<div class="group">
    <div class="row">
        <div class="col-xs-12 col-md-5 ">
            <div class="div-for-my-content">
                Col content
            </div>
        </div>
        <div class="col-xs-12 col-md-5 col-md-push-2">
            <div class="div-for-my-content">
                Col content
            </div>
        </div>
    </div>
</div>
<div class="group">
    <div class="row">
        <div class="col-xs-12 col-md-5 ">
            <div class="div-for-my-content">
                Col content
            </div>
        </div>
        <div class="col-xs-12 col-md-5 col-md-push-2">
            <div class="div-for-my-content">
                Col content
            </div>
        </div>
    </div>
</div>
<div class="group">
    <div class="row">
        <div class="col-xs-12 col-md-5">
            <div class="div-for-my-button">
                Button
            </div>
        </div>
    </div>
</div>

Answer 1

我用一个工作和使用batch 的变体来回答我的问题。

{% for row in posts|batch(2) %}
<div class="group">
    <div class="row">
        {% for item in row %}
        <div class="col-xs-12 col-md-5 {% if loop.index is even %}col-md-push-2{% endif %}">
            <div class="div-for-my-content">
                Col content
            </div>
        </div>
        {% endfor %}
        {% if btn_statut == true and loop.last and posts|length is not divisible by(2) %}
        <div class="col-xs-12 col-md-5 col-md-push-2">
            <div class="div-for-my-button">
                Button
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% if btn_statut == true and loop.last and posts|length is divisible by(2) %}
<div class="group">
    <div class="row">
        <div class="col-xs-12 col-md-5">
            <div class="div-for-my-button">
                Button
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endfor %}

Answer 2

为了将按钮放置在正确的位置、打开的行内或打开新行，您可以检查帖子内的项目数是否为偶数。请注意，你需要做两次测试，一次是均匀的，一次是不均匀的

<div class="group">
    <div class="row">
        {% for post in posts %}
        <div class="col-xs-12 col-md-5 {% if loop.index is even %}col-md-push-2{% endif %}">
            <div class="div-for-my-content">
                Col content
            </div>
            {% if loop.last and posts|length % 2 != 0 %}
            <div class="div-for-my-button">
                Button
            </div>
            {% endif %}
        </div>
{% if loop.index % 2 == 0 and not loop.last %}
    </div>
</div>
<div class="group">
    <div class="row">
{% endif %}
        {% endfor %}
    </div>
    {% if posts|length % 2 == 0 %}
    <div class="row">
        <div class="col-xs-12 col-md-5">
            <div class="div-for-my-button">
                Button
            </div>        
        </div>
    </div>
    {% endif %}
</div>

demo