不同范围内的多个 ID 选择器？ [关闭]答案

【问题标题】：multiple Id selector in different scopes? [closed]不同范围内的多个 ID 选择器？ [关闭]
【发布时间】：2011-09-13 09:11:28
【问题描述】：

Id 元素在整个文档中是唯一的，没关系。这个怎么样

$("#Genders", $("#tableFor_SEARCH")).buttonset();

和

$("#Genders", $("#tableFor_CREATE")).buttonset();

firefox 似乎可以接受，这种用法可以被所有浏览器接受吗？有什么缺点吗？

注意：我尝试这种用法是因为 jquery 可以与 id 选择器和单选框和复选框助手一起使用（尤其是标签的标签）

【问题讨论】：

@eugeneK：这是选择器的作用域。范围可以是文档、jQuery 对象或元素。甚至支持字符串，但文档中没有具体说明。
这里甚至要求什么都非常不清楚。您是否要向元素查询添加 ID？然后使用.add()，您是否希望从页面内的不同范围中选择多个相同ID？那么$('#id1').add('#id2').find('#WhatIWant') 可能就是你想要的。但是，几乎不可能说出您在寻找什么，以及对您来说究竟是什么可靠/官方来源。

标签： jquery html jquery-selectors

【解决方案1】：

浏览器对此没有问题，但它不会改变您的文档无效的事实。不要依赖这种行为来构建您的页面。你永远不知道他们可能会选择在未来的版本中破坏它。

如果您要拥有多个具有相同“标识符”的元素，为什么不使用类而不是 ID？使用的 jQuery 选择器并没有太大的不同：

$(".Genders", "#tableFor_SEARCH").buttonset(); // Or $("#tableFor_SEARCH .Genders")
$(".Genders", "#tableFor_CREATE").buttonset(); // Or $("#tableFor_CREATE .Genders")

【讨论】：

【解决方案2】：

您不必复制 ID 来处理您的案件。您可以使用类选择器来选择具有上下文的元素。这在很多方面都更清洁。见下文，

//will select element with class .Genders inside #tableFor_SEARCH
$(".Genders", "#tableFor_SEARCH").buttonset(); 

//will select element with class .Genders inside #tableFor_CREATE
$(".Genders", "#tableFor_CREATE").buttonset();

为什么不应该重复 ID？

ID 属性应该是唯一的，这是标准。 http://www.w3.org/TR/html401/struct/global.html#h-7.5.2 .ID 属性的作用是在页面中唯一标识一个元素。当你复制它时，这个目的就失效了。

以下是您不应重复 ID 的原因列表，

这不是标准。 http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
它坏了。 http://jsfiddle.net/8H2Da/1/ [有或没有上下文，它只会得到第一个匹配元素]
使用上下文访问具有重复 ID 的元素很慢，因为 ID 选择器是所有选择器中最快的。 http://jsperf.com/jquery-id-selector-with-context/2
您不能从 URL 中标记第二个重复的 ID 元素。 http://fiddle.jshell.net/s27hQ/show/light/#Goto3 [注意网址的最后一部分#Goto3]
您无法创建本地链接<a href="#dupId">Go to That element</a> 来导航到第二个重复的 ID 元素。 http://jsfiddle.net/s27hQ/

它在 jQuery 中是如何工作的？

$('#Genders') 只是调用document.getElementById('Genders') 并用 jQuery 对象包装它。

但是当你使用$("#Genders", $("#tableFor_SEARCH")) 时，它根本不能使用getElementById，在内部，jQuery 将遍历#tableFor_SEARCH 中的每个元素以找到ID 为#Genders 的匹配元素。

为什么浏览器不报错？

从 HTML 的角度来看，ID 属性用于标记页面中的元素，您可以使用本地页面链接 http://jsfiddle.net/s27hQ/ 导航到元素或从 URL http://fiddle.jshell.net/s27hQ/show/light/#Goto3 导航到该部分

浏览器对开发人员来说是灵活和宽容的，即使是草率的 HTML 代码也能在大多数桌面浏览器中呈现精美。同样，它确实不会抱怨有重复的 ID，但它也确实不起作用。上面的项目#4 和#5。

从 JavaScript 的角度来看，可以使用 document.getElementById 访问 ID 元素，这是一种原生、最酷、最快、最古老的 API 之一，可以唯一地访问页面中的元素。这显然没有提供访问具有重复 ID 的第二个元素的方法。

所以请不要使用它。

使其成为未来开发人员更好且易于维护的代码。

【讨论】：

回答问题，并提供官方链接。看起来像你要找的东西:-)

【解决方案3】：

因为 id 在整个文档中应该是唯一的，所以最好的选择器应该是：

$("#Genders").buttonset();

【讨论】：

@moguzalp，是的，有什么问题吗？如果您有多个按钮，请使用类选择器。

【解决方案4】：

正如您刚才所说，id 在文档中是唯一的，因此如果您使用许多具有相同 id 的组件，那么您就会遇到问题，因此最好的答案是使用最具体的 id，如下所示：

$("#tableFor_SEARCH").buttonset();
$("#tableFor_CREATE").buttonset();

PS：我的猜测是"#tableFor_SEARCH" 在（或包含在）"#Genders" 之下。

【讨论】：

【解决方案5】：

你看：

$("#Genders", $("#tableFor_SEARCH"))

会做这样的事情：

$("#tableFor_SEARCH").find("#Genders")

因此它不会将document.getElementById() 用于#Gender，而仅用于#tableFor_SEARCH。 #tableFor_CREATE

我建议你使用任一类：

$(".Genders", $("#tableFor_SEARCH"))

或不同的 ID

$("#Genders_SEARCH")
$("#Genders_CREATE")

这样你就拥有了唯一的 Id 并且拥有原生方法 getElementById 的速度

【讨论】：

【解决方案6】：

你可以在一个选择器中使用多个 id:s，这没问题。您甚至不需要将其指定为范围：

$("#tableFor_SEARCH #Genders").buttonset();

但是，页面中的 id:s 冲突将是一个问题。如果相同的 id 出现多次，某些浏览器可能会选择忽略其中任何一个。即使它适用于所有当前的浏览器，它仍然违反标准，并且可以停止使用任何浏览器更新。

在选择器中包含两个 id:s 仍然很有用，例如，如果您对多个页面使用相同的脚本，并使用 id 来指定页面上的功能。

【讨论】：