同一个HTML文档中有多个相同的ID

Question

我正在创建一个包含多个 HTML 模板的网页，其中可能包含 ID。因此，最终页面可能会包含多个具有相同 ID 的 HTML 元素，这是不被 HTML 所允许的。

但是我似乎可以使用 jQuery 上下文来解决这个问题，例如：$( "#id54", template4 )，但是这种方法在所有浏览器中都能够正常工作吗？或者有些浏览器会拒绝重复的 ID 吗？

- Bjørn Ove Thue

---

DOM 中不要出现相同的 ID。 - PeeHaa

所以你的意思是当你在多个相同的id上进行选择时，jQuery会返回更多的元素？这不应该发生，并且被认为是非常糟糕的做法。请使用多个类。 - Hans Wassink

我不确定是哪个浏览器，但在一个旧的有这个错误的示例中它无法正常工作。我认为那可能是IE8。- 对于一般功能和样式，请使用类，对于精确元素选择，请使用唯一ID。 - Smamatti

"id" 就像其名称所示，是一种唯一的标识符。永远不会有两个相同的。 - Matt K

@PeeHaa：我同意，但应该是“如果可能的话，永远不要在DOM中使用相同的ID”。有时候不可避免，在一个最近的复杂项目中，这是传递各种ID的唯一方式，而不使用隐藏字段、会话数据或自定义属性。我建议使用自定义属性，只要你不介意W3C验证你的代码。 - JustAnotherDeveloper

Answer 1

$(selector, context)语法将仅在给定的上下文中搜索，只要您的ID在该上下文中是唯一的，您的jQuery就应该可以在所有浏览器中正常工作。

但正如您意识到的那样，在模板中以这种方式使用ID是不明智的。

由于多个相同的ID是不允许的，因此没有规定它们应该如何处理。无法保证所有浏览器都会继续支持您正在编写的代码。尽管今天所有主流浏览器都能按照您的期望运行该代码。

解决方法是使用类或者在模板引擎中使用逻辑确保ID唯一，例如templateID-control-2-myButton。

- David Hedlund

---

好的 - 看来我最好使用类来确保。 - Bjørn Ove Thue

Answer 2

只要你使用jQuery上下文，比如$('#some-id', context)，它就可以正常工作。

但是对于在页面中出现多次的元素, 你应该使用类名而不是ID。

- Mathias Bynens

Answer 3

没有浏览器会拒绝您使用多个ID，但这是不好的实践。 “ID”标签是文档对象模型（DOM）中对象的唯一标识符。如果您打算使用jQuery与这些ID，请想出另一个解决方案。 注意：您的代码仍将完美地运行，并在每个浏览器中呈现。只是如果您一直查询它并且它们都具有相同的ID，则会对DOM施加更大的压力！（而且不易维护）

如果您需要每个模板具有相同的ID，请考虑使用类（即.template）或甚至自定义属性（即<div class="something" mycustomid="1">然后使用$(.something).attr('mycustomid')来访问它。（注意：W3C HTML验证器不验证此内容）

如果您真的坚持使用ID，但希望使代码更好，请尝试在ID的开头添加唯一的前缀（甚至是迭代器的索引，如果您的模板是以这种方式创建的），然后使用jQuery进行正则表达式匹配。

这不是很好的答案，但我没有足够的信息 :)

- JustAnotherDeveloper