如何确保我在模板的循环中具有唯一 ID答案

【问题标题】：How do I ensure I have unique ids within a loop in a template如何确保我在模板的循环中具有唯一 ID
【发布时间】：2021-08-25 02:47:39
【问题描述】：

我有一个来自表单集的查询集，它是这样的：{[Item 1],[Item 2]}。为了显示它们，我在模板中循环它们。但是由于循环，我警告说我的 div 具有相同的 id。谁能建议该怎么做？如果我的页面目的只是显示数据，我可以就这样离开。但是页面的目的是查看和更新数据并纠正我的错误，id相同的div会影响到数据库的更新。

                        {{ deviceInterface.management_form }}
                        {% for items in deviceInterface %}
                        
                        <class id= "rowAddition">
                        
                        <div>
                            <div class="row">
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="{{deviceInterface.moduletype.id_for_label}}">Module Type<span
                                            class="text-danger">*</span></label>
                                            <input type="text" name="moduletype" required="" id="id_moduletype" class="form-control" value="{{items.moduletype}}">
                                            <!--<select name="moduletype" required="" id="id_moduletype" class="custom-select mb-3">
                                                <option value="">---------</option>
                                              
                                                <option value="TenGigabitEthernet">TenGigabitEthernet</option>
                                              
                                                <option value="FortyGigabitEthernet">FortyGigabitEthernet</option>  
                                                
                                                <option value="GigabitEthernet">GigabitEthernet</option>
                                              
                                                <option value="Ethernet">Ethernet</option> -->
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="{{deviceInterface.firstportid.id_for_label}}">First Port ID<span
                                            class="text-danger">*</span></label>
                                            <input type="text" name="firstportid" required="" id="id_firstportid" class="form-control" value="{{items.firstportid}}">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="{{deviceInterface.lastportid.id_for_label}}">Last Port ID <span
                                            class="text-danger">*</span></label>
                                            <input type="text" name="lastportid" required="" id="id_lastportid" class="form-control" value="{{items.lastportid}}">
                                        
                                    </div>
                                </div>  
                                <div class="form-group">
                                    <div class="text-sm-center">
                                        <br />
                                        <button type="button" class="btn btn-outline-danger btn-rounded"
                                            id="removerow"><i class="dripicons-minus"></i></button>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                        
                        {%endfor%}

【问题讨论】：

你能分享你的模板中设置ID的相关部分吗？
为什么不将 id 更改为一个类，因为它是重复的 - class="rowAddition"？你不是在表单集上循环吗？
对不起它的 deviceInterface，而不是 formset。但是没有管理线，它仍然可以工作。我在这里做错了吗？我还将 div id="rowAdditon" 更改为 class="rowAddition"。但它并没有改变任何东西。
您对几乎所有输入的 id 进行了硬编码，您应该改用 form.field.id_for_label。 “di_form”是否应该是您正在迭代的表单集中的表单？
已更新。对不起这个错误。在我从其他页面复制时忘记更改。我正在使用 deviceInterface，因为 deviceInterface 正在从数据库中获取查询集。暂时还没有工作。它克隆相同的 id 但显示不同的信息

标签： html django sqlite

【解决方案1】：

Django 为您提供了一个迭代计数器 {{forloop.counter}}（或 {{forloop.counter0}} 从零开始），因此您可以使用它来为循环中的 ID 添加后缀。

Django forloop documentation

【讨论】：

【解决方案2】：

我相信带有 Flask 或 Django 的 Python（我不使用 Django，所以不是 100% 确定）您可以使用 {{ variable }} 方法将迭代器添加到 DIV id。这是我当前的纯 Python 项目中的一个示例。虽然我使用花括号变量作为表单字段的值，但您也可以看到一个用于 id 的变量。

{% for val1 in row['content'] %}
    <div class="table width80"><input type="text" disabled size="50" name="newname" id="{{ row['tablename'] }}{{ val1[0] }}" value="{{ val1[1] }}" /></div>

    <div class="table width10"><button type="submit" class="edit" name="update" value="{{ val1[0] }}">Edit</button></div>

    <div class="table width10"><button type="submit" class="delete" name="delete" value="{{ val1[0] }}">Delete</button></div>
{% endfor %}

希望这能给你一些有用的方向。

【讨论】：