如何使用 Twig 将数据平均呈现为 3 列列表? [英] How to render data equally into 3 column list using Twig?
问题描述
我有包含城市的数组,我想将它们放在 3 列列表中.如何呈现城市数组,将它们平均分成 3 列列表?
我的 html 列表:
<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>...<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>...
<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>...
我希望数据按此顺序出现
city0 city3 city6城市1 城市4 城市7城市 2 城市 5
呈现类似数据的最佳方法是什么?
更新 1:我创建了一个 Twig Fiddle 来在评论中加入建议.http://twigfiddle.com/0h54xy
更新 2:如果您有更新版本的 Twig,最好使用 batch
过滤器.有关示例,请参见 http://twigfiddle.com/0h54xy/5.
这就是模运算符 %
非常有用的地方.
Twig 中的 //
运算符将一个数字进行除法和取整,即 20//3 == 2
注意 Twig 的 loop.index
不是零索引的,第一个值是 1.
{% if city|length %}{% 设置城市每列 = (城市|长度/3)|圆形(0, 'ceil') %}{% for city in city %}{% if cityPerColumn == 1 or loop.index % cityPerColumn == 1 %}<div class="col-md-4"><ul>{% 万一 %}<li class="city-item"><a href="#">{{ city }}</a></li>{% if loop.last 或 loop.index % cityPerColumn == 0 %}
{% 万一 %}{% 结束为 %}{% 万一 %}
I have array contains cities and I would like to put them on the 3 column list. How can I render an array of cities spliting them equally into 3 column list?
My html list:
<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>
I am expecting the data to appear in this order
city0 city3 city6
city1 city4 city7
city2 city5
What's the best approach to render data like it?
Update 1: I have created a Twig Fiddle to incorporate suggestions in the comments. http://twigfiddle.com/0h54xy
Update 2: If you have a newer version of Twig, it might be better to use the batch
filter. See http://twigfiddle.com/0h54xy/5 for an example.
This is where the modulus operator %
is very useful.
The //
operator in Twig will divide a number and floor it, i.e. 20 // 3 == 2
Note that Twig's loop.index
is not zero-indexed, the first value is 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 列列表?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!