使用 Twig 将数据分成 2 列列表 [英] Divide datas into 2 columns list using Twig

查看：27
本文介绍了使用 Twig 将数据分成 2 列列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试将数据分成 2 列.

我想要一个这样的结构:

<div class="accordion__list"><div class="accordion__item"><p class="accordion__text">标题</p><div class="accordion__content"><p>内容</p>

<div class="accordion__item"><p class="accordion__text">标题</p><div class="accordion__content"><p>内容</p>

<div class="accordion__list"><div class="accordion__item"><p class="accordion__text">标题</p><div class="accordion__content"><p>内容</p>

将 .accordion__item div 块分成 2 列 .accordion__list

为此，我用 TWIG 写了这个:

<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>{% 结束为 %}
{% 结束为 %}
<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>{% 结束为 %}
{% 结束为 %}

但这行不通.每次我在 2 列中输入偶数时，列表中的最后一项都会替换最后一列中的最后一项.

这是我的问题的一个例子

我想要这个:

解决方案

为什么不只循环两次集合?这样容易多了，

{% set items = ['item1', 'item2', 'item3', 'item4', 'item5', ] %}<div class="half">{% 为 item 中的 item %}{% 如果不是 loop.index 是偶数 %}<div >{{ item }}</div>{％ 万一 ％}{% 结束为 %}
<div class="half">{% 为 item 中的 item %}{% if loop.index 是偶数 %}<div >{{ item }}</div>{％ 万一 ％}{% 结束为 %}

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 :

解决方案

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>

这篇关于使用 Twig 将数据分成 2 列列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆