8

都市を含む配列があり、それらを 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

そのようなデータをレンダリングするための最良のアプローチは何ですか?

4

1 に答える 1

14

更新 1 : コメントに提案を組み込むために Twig Fiddle を作成しました。 http://twigfiddle.com/0h54xy

更新 2batch : Twig の新しいバージョンを使用している場合は、フィルターを使用することをお勧めします。例については、 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 %}
于 2013-11-08T23:29:42.260 に答える