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

Question

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

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

和

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

firefox看起来还不错,这个用法可以接受所有浏览器和任何缺点吗？

注意:我尝试这种用法,因为jquery使用id选择器和radio&checkbox助手(特别是标签标签)

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的原因列表,

1. 它不是标准.http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
2. 它被打破.http://jsfiddle.net/8H2Da/1/ [有或没有上下文,它只会获得第一个匹配元素]
3. 使用上下文访问具有重复ID的元素是很慢的,因为事实ID选择器是任何选择器中最快的.http://jsperf.com/jquery-id-selector-with-context/2
4. 您无法从URL标记第二个重复的ID元素.http://fiddle.jshell.net/s27hQ/show/light/#Goto3 [注意#Goto3网址的最后部分]
5. 您无法创建本地链接<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();