Цикл For в шаблоне Django при изменении HTML каждой итерации

Question

Итак, у меня есть этот фрагмент HTML:

                     <div class="core-features-single">
                         <div class="row">
                            <div class="col-sm-6">
                                <div class="core-feature-img">
                                    <img src="assets/images/watch-4.png" class="img-responsive" alt="Image">
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="core-feature-content arrow-left">
                                    <i class="icofont icofont-brand-android-robot"></i>
                                    <h4>Android and iOS Apps Install</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="core-features-single">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="core-feature-content arrow-right">
                                    <i class="icofont icofont-ui-text-chat"></i>
                                    <h4>Live Chat With Friends</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat.</p>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="core-feature-img">
                                    <img src="assets/images/watch-5.png" class="img-responsive" alt="Image">
                                </div>
                            </div>
                        </div>
                    </div>

, который генерирует такой вывод на веб-странице:

Но как мне перебрать такой HTML-элемент? Поскольку порядок блоков текста и изображения меняется на каждой итерации.

Что я придумал:

                    {% for entry in page.product_features_showcase.all %}
                    {% image entry.image height-1000 as img %}
                    <div class="core-features-single">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="core-feature-content arrow-{% cycle 'left' 'right' 'left' 'right' 'left' 'right' 'left' 'right' %}">
                                    <i class="icofont icofont-phone"></i>
                                    <h4>{{ page.product_features_showcase_title }}</h4>
                                    <p>{{ page.product_features_showcase_description }}</p>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="core-feature-img">
                                    <img src="{{ img.url }}" class="img-responsive" alt="Image">
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}

Я знаю, что могу использовать цикл для создания разных классов CSS на каждой итерации. Но как изменить порядок элемента HTML? Чтобы этот HTML работал в цикле.

Answer 1

Используйте forloop.counter и divisibleby внутри цикла for для визуализации различных блоков HTML в нечетных и четных циклах:

{% if forloop.counter|divisibleby:2 %}
Right-arrow block
{% else %}
Left-arrow block
{% endif %}

В документах Django: https://docs.djangoproject.com/en/2.2/ref/templates/builtins/#divisibleby