如何在Jinja模板中每三个元素包裹profilewrapper div？

原始数据 #

profile_list = [
    {
        "display_name": "test",
        "description": "Image mit CPU",
        "default": True,
        "kubespawner_override": {
            "image": "fake",
        },
    },
    {
        "display_name": "test",
        "description": "Image mit GPU (small)",
        "kubespawner_override": {
            "image": "fake",
            "extra_resource_guarantees": {"nvidia.com/gpu": "1"},
            "extra_resource_limits": {"nvidia.com/gpu": "1"},
            "node_selector": {"sma-gpu-size": "small"},
        },
    },
    # 更多元素...
]

错误的Jinja模板代码 #

<div class='form-group' id='kubespawner-profiles-list'> {%- for profile in profile_list %}
    {% if loop.index0 % 3 == 0 %}
    <div class='profilewrapper'>{{ profile.display_name }}
        {% endif %}
        <label>
            <input type="radio" class="card-input-element" name="profile" />

            <div class="card-input center">
                <h3 class="panel-heading">{{profile.display_name}}</h3>
                <p class="panel-body">
                    {{profile.description}}
                </p>
            </div>
        </label>
        {% if loop.index0 % 3 == 0 %}
    </div>
    {% endif %}
    {%- endfor %}
</div>

当前代码的问题在于，打开和关闭profilewrapper的条件都是loop.index0 %3 ==0，导致每循环到第1、4、7...个元素时，会同时打开和关闭div，最终每个元素单独被包裹。

正确的Jinja模板代码 #

<div class='form-group' id='kubespawner-profiles-list'>
    {%- for profile in profile_list %}
        {% if loop.index0 % 3 == 0 %}
            <div class='profilewrapper'>
        {% endif %}

        <label>
            <input type="radio" class="card-input-element" name="profile" />
            <div class="card-input center">
                <h3 class="panel-heading">{{profile.display_name}}</h3>
                <p class="panel-body">
                    {{profile.description}}
                </p>
            </div>
        </label>

        {% if loop.index0 % 3 == 2 or loop.last %}
            </div>
        {% endif %}
    {%- endfor %}
</div>

代码说明 #

• 打开div的条件：loop.index0 %3 ==0，即每3个元素的第一个（索引0、3、6...）时，创建新的profilewrapper容器。
• 关闭div的条件：loop.index0 %3 ==2 or loop.last，当循环到每3个元素的最后一个（索引2、5、8...），或是列表的最后一个元素（避免列表长度不是3的倍数时，最后一组容器未闭合）时，关闭profilewrapper容器。

这样就能确保每3个元素被包裹在同一个div中，即使列表总长度不是3的倍数，最后一组剩余元素也会被正确包裹。

内容的提问来源于stack exchange，提问作者Data Mastery