Divide datas into 2 columns list using Twig

问题

I'm trying to divide datas into 2 columns.

I would like to have a structure like this :

<div class="accordion">
    <div class="accordion__list">
        <div class="accordion__item">
            <p class="accordion__text">Title</p>
            <div class="accordion__content">
                <p>Content</p>
            </div>
        </div>
        <div class="accordion__item">
            <p class="accordion__text">Title</p>
            <div class="accordion__content">
                <p>Content</p>
            </div>
        </div>
    </div>
    <div class="accordion__list">
        <div class="accordion__item">
            <p class="accordion__text">Title</p>
            <div class="accordion__content">
                <p>Content</p>
            </div>
        </div>
    </div>
</div>

To divide .accordion__item div block into 2 columns .accordion__list

For that I wrote this with TWIG :

<div class="accordion">
    <div class="accordion__list">
        {% for liste in bloc.listes[:(bloc.listes|length / 2)|round(0, 'floor')] %}
        <div class="accordion__item">
            <p class="accordion__text">{{ liste.titre }}</p>

            <div class="accordion__content">
                {% for contenu in liste.contenu %}
                    <p>{{ contenu.texte }}</p>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
    <div class="accordion__list">
        {% for liste in bloc.listes[(bloc.listes|length / 2)|round(0, 'floor'):] %}
        <div class="accordion__item">
            <p class="accordion__text">{{ liste.titre }}</p>

            <div class="accordion__content">
                {% for contenu in liste.contenu %}
                    <p>{{ contenu.texte }}</p>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>

But that's don't work. Each time I got even number into my 2 columns and the last item from my list replace the last item in the last column.

Here an example of my problem

And I would like to have this :

回答1:

Why don't you just loop the collection twice? It much easier this way,

{% set items = ['item1', 'item2', 'item3', 'item4', 'item5', ] %}

<div class="half">
{% for item in items %}
    {% if not loop.index is even %}
    <div >{{ item }}</div>
    {% endif %}
{% endfor %}
</div>
<div class="half">
{% for item in items %}
    {% if loop.index is even %}
    <div >{{ item }}</div>
    {% endif %}
{% endfor %}
</div>

回答2:

I would solve it with css instead of Timber. Just make it a list which makes uses of inline-blocks with a width of 50%.

. accordion {
    position: relative;
}
. accordion__list {
    display: inline-block;
}

Or is that too simple ?

回答3:

Don't use two loops, you could think about performance...

  {% set firstHalf = "" %}
    {% set secondHalf = "" %}

    {% for item in items %}
        {% if loop.index is odd %}
           {% set firstHalf %}{{ firstHalf }} <div >{{ item }}</div> {% endset %}
        {% else %}
           {% set secondHalf %}{{ secondHalf }} <div >{{ item }}</div> {% endset %}
        {% endif %}
    {% endfor %}

    <div>
       {{ firstHalf }}
    </div>
    <div>
       {{ secondHalf }}
    </div>

来源：https://stackoverflow.com/questions/48188356/divide-datas-into-2-columns-list-using-twig

标签

twig

timber