在每个 3d 元素树枝循环、模数之后添加 div答案

【问题标题】：Add div after every 3d element twig loop, modulus在每个 3d 元素树枝循环、模数之后添加 div
【发布时间】：2014-10-26 03:16:25
【问题描述】：

嗨，我有这个树枝循环，我需要在每个 3rd 元素之后添加一些 html 以关闭 div 行并打开新行。

我尝试了该网站上的各种 sn-ps，但其中任何一个都没有运气

<div class="row">
    {% for date, date_info in dates %}
        <div class="col-sm-4">
            <div class="event-box">
                {% for category in date_info.events %}
                    {% for event in category %}
                        <div class="event-header">
                            {% if event.get_runtime( 'content_img_url' ) is empty %}
                                {{ event | avatar( [
                                'post_thumbnail',
                                'location_avatar',
                                'category_avatar'
                                ]) | raw }}
                            {% endif %}
                            <div class="event-date">
                                {{ date | month }}
                                {{ date | day }}
                            </div>
                            <div class="event-footer">
                                <h3>{{ event.get_runtime( 'filtered_title' ) | raw }}</h3>
                                <div class="event-time">
                                    {{ event | timespan( 'short' ) | raw }}...
                                </div>
                                <div class="event-content"> {{ event.get_runtime( 'filtered_content' ) | slice(0,200) | raw }}</div>

                                <a  class="btn btn-success" href="{{ event.get_runtime( 'instance_permalink' ) | e('html_attr') }}">
                                    {{ text_read_more }}
                                </a>
                            </div>
                        </div>
                    {% endfor %} {# event in category #}
                {% endfor %} {# category in date_info.events #}
            </div>
        </div>
    {% endfor %} {# date, date_info in dates #}
</div>

【问题讨论】：

我在这里没有看到任何尝试。你试过batch 过滤器吗？
您的问题对于您要问的问题来说太长了。请考虑缩短它。完整的 HTML sn-p 似乎没有必要。

标签： loops twig modulus

【解决方案1】：

在阅读本文档时：http://twig.sensiolabs.org/doc/tags/for.html#the-loop-variable

我会试试这种代码：

{% for date, date_info in dates %}
   {% if  loop.index % 3 == 0 %}
       {# put your code to close your div #}
   {% endif %}
{% endfor %}

【讨论】：

@benedict_w 谢谢^^

【解决方案2】：

如果 loop.index 可以被 (3) 整除而不是 loop.last %} 则可以使用 {%。

这是我的完整工作代码示例：

<div class="row">

    {% for date, date_info in dates %}
        <div class="col-sm-4">
            <div class="event-box">
                {% for category in date_info.events %}
                    {% for event in category %}
                        <div class="event-header">
                            {% if event.get_runtime( 'content_img_url' ) is empty %}
                                {{ event | avatar( [
                                'post_thumbnail',
                                'location_avatar',
                                'category_avatar'
                                ]) | raw }}
                            {% endif %}
                            <div class="event-date">
                                {{ date | month }}
                                {{ date | day }}
                            </div>
                            <div class="event-footer">
                                <h3>{{ event.get_runtime( 'filtered_title' ) | raw }}</h3>

                                <div class="event-time">
                                    {{ event | timespan( 'short' ) | raw }}...
                                </div>
                                <div class="event-content"> {{ event.get_runtime( 'filtered_content' ) | slice(0,200) | raw }}</div>

                                <a class="btn btn-success"
                                   href="{{ event.get_runtime( 'instance_permalink' ) | e('html_attr') }}">
                                    {{ text_read_more }}
                                </a>
                            </div>
                        </div>
                    {% endfor %} {# event in category #}
                {% endfor %} {# category in date_info.events #}
            </div>
        </div>

        {% if loop.index is divisibleby(3) and not loop.last %}
        </div>

        <div class="row">

        {% endif %}

    {% endfor %} {# date, date_info in dates #}

</div>

【讨论】：

我认为这并不完全正确。如果您有 3 个项目，这将使“
”打开。您应该关闭循环外的 div 并在“if 条件”中添加“and not loop.last”以防止这种情况发生。

【解决方案3】：

您可以改用batch 过滤器（1.12.3 中的新功能）。

{% for date, date_info in dates|batch(3) %}
   .....
   .....
{% endfor %}

【讨论】：

是的！这太棒了，效果很好。更有帮助。
这是一个很好的解决方案。

【解决方案4】：

我认为这是更好的解决方案：

{% for date, date_info in dates %}
   {% if loop.first %}
      <div class="row"> {# open row #}
   {% endif %}


       {# your code here #}


    {% if loop.index % 3 == 0 %}
        </div><div class="row"> {# after 3 iterates close row and open new #}
    {% endif %}                
    {% if loop.last %}
        </div> {# close last row #}
    {% endif %}
{% endfor %}

【讨论】：

这个答案可能很好，但您能否解释一下它在做什么以及为什么它可以解决 OPs 问题？
代码不言自明，这是一个更好的答案。