在每个3d元素树枝环,模数后添加div

Question

嗨所以我有这个twig循环,我需要的是在每个第3个元素之后添加一些html来关闭div行并打开新的.

我试过这个网站的各种片段,但没有任何一个运气

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

Answer 1

您可以改用批处理过滤器(1.12.3中的新增功能).

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

Answer 2

如果使用{%if 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>

Answer 3

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

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

Answer 4

阅读本文档: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 %}