Html重复ID

Question

我的控件是根据用户输入动态构建的，还有n文本框，其ID也是动态的。

但是，我没有预见到这个HTML会在同一个html页面的其他地方重复使用。

我现在面临的问题是重复的ID，这导致我的jQuery函数无法正常工作。

我确实理解ID应该是唯一的，但是，我可以通过使用具有不同ID的最外面的<div>来避免这个问题吗？

那里的专家可以给我一些好的建议吗？

附：我正在寻找一个有效的解决方案，因为如果我需要更改每个元素的ID，那么我的jQuery需要做很多工作。

请帮忙。谢谢！

<div id="Container1">
  <div id="Control">
    <input type="text" id="TextBox1" />
    <input type="text" id="TextBox2" />
  </div>
</div>

<div id="Container2">
  <div id="Control">
    <input type="text" id="TextBox1" />
    <input type="text" id="TextBox2" />
  </div>
</div>

我想知道，在jQuery函数中，我是否可以在选择中执行类似... #container1 > #textbox1的操作？

Answer 1

你绝对不应该有重复的ID。它可能工作*，但它在语义上是不正确的，你不应该这样做

你应该重构你的jQuery，无论多么糟糕。最好的选择是使用一个类，也许使用父类的特定id来指定你想要的那个

另一个不太吸引人但可行的方法是在ID的末尾添加一个数字或某些内容以使其唯一，然后使用jQuery检测具有ID的特定部分的任何元素

* - 正如Arun所描述的，jQuery将接受选择器，但它不是有利的，因为它是不正确的

Answer 2

我确实理解“Id”应该是唯一的，但是，对于具有不同“id”的outest，它能帮助解决问题吗？

没有。拥有非唯一元素ID将无法正常工作。在任何情况下都不一致（不同的浏览器和框架可能以不同的方式处理这种情况）。

那里的专家可以给我一些好的建议吗？

更喜欢使用class而不是使用id，特别是对于可能在页面上多次重复使用的任何组件。

将ids设置为包含元素本身而不是内部组件元素，并相应地修改jQuery选择器。或者交替实现组件，使其在使用时采用'namespace'参数/属性，并在每个classname前面加上组件内的命名空间（这种方法在创建自定义JSP标记时效果特别好）。

Answer 3

即使是错误的，jQuery中的选择器也没有任何问题

$('#Container1 #TextBox1').val(1)
$('#Container2 #TextBox1').val(2)

但是：ぁzxswい

---

更好的选择是使用属性选择器

Fiddle

但是：ぁzxswい

Answer 4

我建议你使用

$('#Container1 input[id="TextBox1"]').val(1)
$('#Container2 input[id="TextBox1"]').val(2)

而不是Fiddle。重复的class不是一个好习惯。

Answer 5

我建议使用class而不是id。或者在生成动态ID时添加一些后缀。

Answer 6

你不能多次拥有相同的id。请改用id。

Answer 7

取决于HTML版本：

1. id ID必须是文档范围内唯一的。
2. class ID在容器树中是唯一的。

但我们建议不是好的做法

Answer 8

组件：如果您编写可重用的组件，例如）在你的例子中，如果你将两个或多个组件放入一个文档，那么你将得到HTML 4 html。因此，HTML 5使用INVALID。