找到 2 个具有非唯一 id 的元素

Question

当我们id在两个不同的form标签中使用相同的名称时，我收到以下警告。

[DOM] 找到 2 个具有非唯一 id 的元素

这是我的 HTML 片段：

               <div class="modal-dialog">
                    <form action="" method="post" id="myid-1" name="myid-1">
                        <input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">
                        <label for="Job_Name">Job Name<span class="text-danger">*</span></label>
                        <button type="submit">Submit</button>
                    </form>
                </div>

                <div class="modal-dialog">
                    <form action="" method="post" id="myid-2" name="myid-2">
                        <input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">
                        <label for="Job_Name">Job Name<span class="text-danger">*</span></label>
                        <button type="submit">Submit</button>
                    </form>
                </div>

如何解决“Found 2 elements with non-unique id”警告？

Answer 1

您需要更改id="Job_Name"为唯一的，例如id="Job_Name1" id="Job_Name2"等，因为 ID 在 DOM 中必须是唯一的。

当您想使用document.getElementById('Job_Name')或使用 jQuery选择元素时，它会产生冲突，$('#Job_Name')因为您将无法获得具有相同 id 的第二个或其他元素。您将需要使用 index 和 querySelectorAll ，这将首先破坏使用 Id 的目的。

Answer 2

因为您提到同一页面中具有相同 id ('Job_Name') 的两个输入元素 您不能将同一页面中的相同 id 赋予两个不同的元素