Django HTML模板嵌套For循环实现卡片组的语法问题

核心问题：替代enumerate()的模板语法 #

Django模板不支持直接调用Python内置函数enumerate()，但可以用模板自带的forloop变量来获取索引：

• forloop.counter：从1开始的索引
• forloop.counter0：从0开始的索引
• forloop.first/forloop.last：判断是否是第一个/最后一个元素

假设数据结构示例 #

先明确传递到模板的典型数据结构（若你的结构不同，可对应调整）：

# 视图中传递的上下文
my_groups = [
    {
        "group_name": "数据同步工具组",
        "tables": [
            {"name": "用户同步表", "desc": "同步第三方用户数据"},
            {"name": "订单同步表", "desc": "同步电商订单数据"}
        ]
    },
    {
        "group_name": "数据分析工具组",
        "tables": [
            {"name": "用户行为统计表", "desc": "统计用户访问行为"},
            {"name": "销售数据报表", "desc": "生成月度销售报表"}
        ]
    }
]

错误模板代码示例（使用了enumerate） #

{% for idx, group in enumerate(my_groups) %}

工具组{{ idx+1 }}: {{ group.group_name }}

{% for table in group.tables %}

{{ table.name }}

{{ table.desc }}

{% endfor %}

{% endfor %}

正确的模板代码实现 #

用forloop.counter替代enumerate()的索引，同时实现工具组卡片+内部表格卡片的布局：

<div class="container">
  {% for group in my_groups %}
    <!-- 工具组卡片容器 -->
    <div class="tool-group-card">
      <h3>工具组{{ forloop.counter }}: {{ group.group_name }}</h3>
      <!-- 表格卡片列表 -->
      <div class="table-cards-wrapper">
        {% for table in group.tables %}
          <div class="single-table-card">
            <div class="card-header">
              <h4>{{ table.name }}</h4>
            </div>
            <div class="card-body">
              <p>{{ table.desc }}</p>
              <!-- 如果有更多表格字段，可继续添加 -->
              {% if table.extra_info %}
                <span class="tag">{{ table.extra_info }}</span>
              {% endif %}
            </div>
          </div>
        {% empty %}
          <p>该工具组暂无表格</p>
        {% endfor %}
      </div>
    </div>
  {% empty %}
    <p>暂无工具组数据</p>
  {% endfor %}
</div>

额外提示 #

1. 如果你的my_dict是键值对结构（比如键是组名，值是表格列表），可以用{% for group_name, tables in my_dict.items %}来遍历
2. 用{% empty %}处理空数据的情况，提升页面友好性
3. 可以结合CSS（如Flexbox或Grid）实现响应式卡片布局

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