在HTML / CSS中,两个不同页面上的两个元素能否具有相同的ID?

时间:2018-11-11 07:16:05

标签: jquery html dom jquery-selectors

是否可以在两个不同的页面上使用具有相同ID的元素?

在这种情况下jQuery选择器如何工作?

2 个答案:

答案 0 :(得分:1)

id在一页上必须唯一。

id分配给元素而不是class的意图是

  

此元素具有唯一标识

但是,如果不同页面上的两个元素表示相同的数据,则它们具有相同的id是可以接受的,例如:

page_1.html

<div id="title">About Me</div>

page_2.html

<div id="title">My Projects</div>

相反,如果两个页面上的元素表示不同的数据,并且您为它们分配了相同的id,但在技术上有效,那么以后可能很难理解您的代码,例如:

page_1.html

<div id="contact">My Name</div>

page_2.html

<div id="contact">click to contact</div>

作为一个场景的例子,其中有人可能会对具有不同数据的元素使用相同的id,我分享了以下经验,以防有人在类似情况下思考...

我最近尝试通过将动态注入的元素分配给具有相同id(在编辑内容场景中为<input>元素)的页面中来“聪明”,无论其位置如何(以编程方式只能在页面中出现一次)。

这种方法的优点是:

  • 单个CSS样式定义
  • 动态元素的单个HTML模板
  • 后续事件处理逻辑中的预期相似性

但是我发现我一直需要一种唯一标识实例的方法,因此我最终使用了指示唯一实例的数据属性。

它很快变得非常复杂,我有点后悔自己的方法,但仍然想知道分配一个唯一的id是否会使程序逻辑更简单(但是我现在没有时间重构)。

答案 1 :(得分:0)

如果具有相同ID的每个元素都驻留在其自己的页面上,则jQuery一次只能看到一个元素,因为一次在每个页面上下文中仅存在一个具有该ID的元素。就这么简单。