在具有其他 id 的两个 div 元素中有两个具有相同 id 的元素是否正常？答案

【问题标题】：Is it normal to have two elements with same id in two div elements with other id?在具有其他 id 的两个 div 元素中有两个具有相同 id 的元素是否正常？
【发布时间】：2011-03-06 19:22:05
【问题描述】：

我知道，两个元素不能有相同的 id。但它发生了，在我的项目中，我在其他 div 中有两个具有相同 id 的元素，就像这样

<div id="div1">
     <img id="loading" />
</div>
<div id="div2">
     <img id="loading" />
</div>

还有 CSS：

#div1 #loading
{
    some style here...
}
#div2 #loading
{
    another style here...
}

对我来说很好，但也许不建议这样做？

是的，我知道，我可以使用类，强烈建议这样做，但我想知道这种使用 id 是否存在潜在风险？我认为没有，因为当我写例如

$("#div1 #loading")... 它成为一个独特的元素。不是吗？

【问题讨论】：

有没有你认识的浏览器，哪里不行？
@Syom：它可能与 CSS 一起工作得很好，但如果你尝试在 Javascript 中获取这些元素，你几乎肯定会遇到问题。
@Andy E 的头我使用 Jquery，并以与 css 中相同的方式调用它们。即 $("#div1 #loading")...？有没有潜在的风险？
ID 是 identification 的缩写 ...所以它必须是 unique。接受它并过上幸福的生活:) 为什么要反对规范？仅仅因为某事在某些情况下有效，并不意味着您应该那样做，并且在所有情况下都有效。
定义它必须是唯一的：w3.org/TR/html401/struct/global.html#adef-id 理论上你可以通过在获取 div 时也指定父级的方式来做到这一点，但如果它在深层结构中怎么办？一个 id 可以用来识别某些东西（就像 Felix Kling 所说的那样）。为更多元素使用相同的 CSS 指定了 class 属性。那么为什么不只是使用它们应该如何使用的东西;）

标签： javascript jquery css uniqueidentifier

【解决方案1】：

https://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#adef-id

但是！

如果您在项目中需要它，可以按照我的问题最终更新中的建议使用它！

【讨论】：

【解决方案2】：

在元素上使用 Id 是不好的做法。因为我会用他们的名字识别来提供一些独特的东西来理解。第二件事我们在 CSS 中使用它，但在 JavaScript 中这是一种不好的做法。这个班级和学生的好榜样。

所以不要这样做。

【讨论】：

【解决方案3】：

我不同意人们说总是使用“唯一”，即每次标记一个时都使用不同的 ID。有时它可以接受，例如我正在制作计算器的情况。

javascript 进行数学运算并将结果输出到 id="total" 的 div 中。但是，我需要将相同的“总数”放在 2 个不同的地方。在这种情况下，我为什么不使用具有相同 ID 的两个不同的 div？我需要两个盒子里的数字相同。使用 jQuery，我执行并输出一次数学运算，它同时填充两个 div，这正是我想要的。

只要您了解从具有相同 ID 的 2 个 div 中提取信息的风险，那么我说请放心。只要你不迷惑自己，在同一个 div ID 中需要 2 个不同的结果。

【讨论】：

谨慎的编码人员出于多种原因使用有效的 HTML。其中首先是考虑维护者，他们稍后会拿起他的代码。有效的 HTML 使用唯一的 ID 属性。
我不会对很多答案投反对票，但对于那些鼓励人们故意忽视已发布标准的答案，我愿意破例。
您似乎在使用 id，而您应该使用 class。如果你用锤子作为螺丝刀，如果你打破了几个螺丝，不要感到惊讶。
是的，伙计！在我们的宇宙中，一切都不是那么简单；）

【解决方案4】：

只是因为没有人发布它 - the HTML spec, section on ID，上面写着：

id = 名称 [CS]

此属性分配元素的名称。这个名字必须在文档中是唯一的。

【讨论】：

我有点迷惑 - 在最后一天左右，这收到了反对票和赞成票。是的，按照我后来的标准，它很差；也许这相当于 C 或 C++ 中的未定义行为。 OP 将定义不明确的语义（如果 ID 应该是唯一的，如果重复它们会发生什么？）与观察到的行为分层，并希望有人会告诉他们这没关系。我指的是他们离开铁轨的第一个点。

【解决方案5】：

撇开验证和纯粹主义不谈，它功能齐全。但是，如果我使用该#loading id 并发现 jquery 效果或 css 效果适用于超过 1 个元素，我肯定会很生气。请告诉我 IE6 或 7 或 Firefox 1.x 或 2.x 是否破坏了该代码。

【讨论】：

【解决方案6】：

ID 应该是唯一的，所以 id1 和 id2 没问题，但是对于许多具有相同样式的元素，请使用 HTML 类和 CSS 类选择器：

.loading
{
styles here
}

这些可以在页面上重复多次：)

【讨论】：

HTML 类。 CSS 类选择器。没有 CSS 类之类的东西（并且该术语以不同的方式被滥用，可能会造成混淆）

【解决方案7】：

主要原因是 JavaScript DOM 操作。在你的情况下，如果你做这样的事情......

document.getElementById("loading")

... JavaScript 将返回第一个元素，并且只返回第一个元素。如果不进行一些认真的 DOM 遍历，您将无法访问其余部分。

【讨论】：

【解决方案8】：

Id 用于区分元素，它们必须是唯一的，原因不同，其中之一是使用 javascript，如果您有重复的 ID，getElementById 之类的功能将无法正常工作，您将无法预测什么它会在不同的浏览器上执行，因为 JS 在每个浏览器上自行实现的方式不同。

如果您希望使用 #div loading 和 #div2 loading 之类的结构，显然这两种加载具有相似的用途，因此它们应该是类并且可以像这样使用

#div1.loading 和#div2.loading

使用这种语法的另一个好处是像这样将通用样式放在 .loading 中

.loading{ 两种加载共有的样式}

#div1.loading{ 仅在 div1 中加载使用的样式}

#div2.loading{ div2 加载时使用的样式}

【讨论】：

【解决方案9】：

Unique:

在数学和逻辑中，“只有一个”这个短语用来表示具有某种性质的对象恰好存在。

#div1 #loading 无法弥补您在your document 中有两个#loading 实例的事实。所以，不，不要那样做。

【讨论】：

【解决方案10】：

正常吗？没有。

推荐吗？当然不！它实际上是被禁止的（但执行力很弱）。

但它（显然）有效，所以...

【讨论】：

【解决方案11】：

将您的 id 更改为 class。给出重复的 id 不是一个好主意。

想想两个学生在一个班上的卷号相同。想象他们得到考试结果。学校如何识别成绩单？

您的方式不兼容跨浏览器，在编写 JavaScript 和发布表单等时会产生很大影响

使用类也可以达到同样的效果

见

<div id="div1">
     <img class="loading" />
</div>
<div id="div2">
     <img class="loading" />
</div>

和css：

#div1 .loading
{
    some style here...
}
#div2 .loading
{
    another style here...
}

【讨论】：

【解决方案12】：

是的，您是对的，不建议这样做。 ID 应该始终是唯一的（例如，如果您想使用 javascript 选择元素）。如果你只是想给 div 添加相同的样式，只需使用 css 类即可。

【讨论】：

【解决方案13】：

id 必须（应该）是唯一的！

在大多数浏览器中，您将无法通过 JS 选择它 - 更好地使用类

【讨论】：