logo标签列表

在两个具有不同id的div元素中，是否可以存在具有相同id的两个元素？

javascriptjquerycssuniqueidentifier
15

我知道两个元素不能有相同的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")...它变成了一个唯一的元素。 不是吗？

你知道有哪个浏览器它不能运行吗？ - Simon
2
@Syom：使用CSS可能会很好地工作，但如果您尝试在Javascript中获取这些元素，几乎肯定会遇到问题。 - Andy E
7
ID是“身份识别”的缩写... 因此必须是唯一的。接受它，过上快乐的生活 :) 为什么要抵制规范呢？仅仅因为某些情况下某种方法有效，并不意味着你应该这样做，也不代表它在所有情况下都适用。 - Felix Kling
3
定义规定它必须是唯一的： http://www.w3.org/TR/html401/struct/global.html#adef-id 理论上，如果在深层结构中，您可以通过指定父级获取div来完成它，但如果id重复了怎么办？如Felix Kling所说，id用于标识某些东西。class属性用于为多个元素使用相同的CSS样式。因此，为什么不按照它们应该使用的方式来使用它们呢 ;) - enricog
@Syom：使用jQuery，使用选择器$('#loading');在IE6和7中只会返回一个项目（不确定8是否支持querySelectorAll）。关于$('#div1 #loading');我不确定，这取决于jQuery/Sizzle内部的优化。 - Andy E
显示剩余4条评论
13个回答
20

将您的id更改为class。给出重复的id是不明智的。

想象一下班里有两个学生拥有相同的学号，他们收到考试成绩后学校如何能够识别学生的成绩单呢？

您这种方式在跨浏览器兼容性方面存在问题，并且会影响JavaScript编码、提交表格等许多方面。

您可以使用class来达到相同的效果。

请参见：

<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...
}
13

id必须是唯一的！

在大多数浏览器中，如果您使用JS选择它将会出现麻烦 - 最好使用类(class)。

6
重要原因是为了JavaScript DOM操作。在您的情况下，如果您执行以下操作...
document.getElementById("loading")

... JavaScript将返回第一个元素，仅返回第一个元素。如果没有进行DOM遍历，您将无法访问其余元素。

4

因为没有其他人发布过它 - HTML规范中ID部分，其中写道：

id = name [CS]

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

我有点困惑-在过去的一天左右，这个问题收到了一个踩和一个赞。是的，按照我的后来的标准，这很差劲；也许这相当于C或C++中的未定义行为。OP正在将定义不清的语义（如果ID应该是唯一的，那么如果它们重复会发生什么？）与观察到的行为叠加在一起，并希望有人告诉他们这是可以的。我指出了他们离开正轨的第一个要点。 - Damien_The_Unbeliever
3

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

.loading
{
styles here
}

这些内容可以在页面上重复多次 :)
1
HTML类。CSS类选择器。没有CSS类这样的东西（而且该术语被滥用了很多不同的方式，可能会令人困惑）。 - Quentin
3

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

3

唯一:

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

#div1 #loading并不能解决在您的文档中存在两个#loading实例的问题。因此，请不要这样做。

2

这正常吗？不是。

这推荐吗？绝对不！实际上是被禁止的（但执法力度较弱）。

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

1

Id用于区分元素，它们必须在不同的情况下是唯一的，其中之一是使用JavaScript，如果您有重复的ID，像getElementById这样的函数将无法正常工作，因为JS在每个浏览器上的自我实现方式不同，您将无法预测它在不同浏览器上的行为。

如果您希望使用类似#div loading和#div2 loading的结构，那么两个loading都具有相似的用途，因此它们应该是类，并且将像这样使用：

#div1.loading和#div2.loading

此外，使用此语法的一个优点是将通用样式放在.loading中，如下所示：

.loading { 通用于两个loading的样式 }

#div1.loading { 仅用于div1中的loading的样式 }

#div2.loading { 仅用于div2中的loading的样式 }

1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接