Question

我有数组包含城市，我想把它们放在3列列表中。如何渲染一系列城市将它们分成3列列表？

我的HTML列表：

                    <div class="col-md-4">  
                        <ul>
                            <li class="city-item"><a href="#">City</a></li>
                            <li class="city-item"><a href="#">City</a></li>
                            <li class="city-item"><a href="#">City</a></li>
                            <li class="city-item"><a href="#">City</a></li>
                            ...
                        </ul>
                    </div>
                    <div class="col-md-4">  
                        <ul>
                            <li class="city-item"><a href="#">City</a></li>
                            <li class="city-item"><a href="#">City</a></li>
                            <li class="city-item"><a href="#">City</a></li>
                            <li class="city-item"><a href="#">City</a></li>
                            ...
                        </ul>
                    </div>
                    <div class="col-md-4">  
                        <ul>
                            <li class="city-item"><a href="#">City</a></li>
                            <li class="city-item"><a href="#">City</a></li>
                            <li class="city-item"><a href="#">City</a></li>
                            <li class="city-item"><a href="#">City</a></li>
                            <li class="city-item"><a href="#">City</a></li>
                            ...
                        </ul>
                    </div>

我希望数据按此顺序显示

city0   city3   city6
city1   city4   city7
city2   city5

渲染数据的最佳方法是什么？

Answer 1

更新1 ：我创建了一个Twig Fiddle，在评论中加入了建议。 http://twigfiddle.com/0h54xy

Update 2 ：如果你有更新版本的Twig，最好使用batch过滤器。有关示例，请参阅http://twigfiddle.com/0h54xy/5。

这是模数运算符%非常有用的地方。

Twig中的//运算符会对数字进行除数并将其置于最低位置，即20 // 3 == 2

请注意，Twig的loop.index不是零索引，第一个值是1.

{% if cities|length  %}
    {% set citiesPerColumn = (cities|length / 3)|round(0, 'ceil') %}

    {% for city in cities %}

        {% if citiesPerColumn == 1 or loop.index % citiesPerColumn == 1 %}
            <div class="col-md-4">
                <ul>
        {% endif %}

                    <li class="city-item"><a href="#">{{ city }}</a></li>

        {% if loop.last or loop.index % citiesPerColumn == 0 %}
                </ul>
            </div>
        {% endif %}

    {% endfor %}
{% endif %}

如何使用Twig将数据平均渲染到3列列表中？

1 个答案: