Question

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

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

和

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

firefox似乎没问题，这种用法可以接受所有浏览器和任何缺点吗？

注意：我尝试这种用法，因为jquery适用于id选择器和radio＆amp;复选框助手（特别是标签标签）

Answer 1

浏览器可以正常使用，但它不会改变文档无效的事实。不要依赖这种行为来构建您的页面。你永远不会知道他们可能会选择在未来版本中打破它。

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

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

Answer 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
您无法在网址中标记第二个重复的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的角度来看，ID元素可以使用document.getElementById本地，最酷，最快，最古老的API之一来访问页面中唯一的元素。这显然没有提供访问具有重复ID的第二个元素的方法。

所以请不要使用它。

为未来的开发人员提供更好，更易于维护的代码。

Answer 3

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

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

Answer 4

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

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

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

Answer 5

你看：

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

会做这样的事情：

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

所以它不会document.getElementById()用于#Gender，而只会用于#tableFor_SEARCH resp。 #tableFor_CREATE

我建议你使用任何一种类：

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

或不同的ID

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

这样你就拥有了独特的ID并且具有本机方法getElementById

的速度

Answer 6

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

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

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

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

不同范围内的多个Id选择器？

6 个答案: