不同范围内的多个 ID 选择器? [关闭]
Posted
技术标签:
【中文标题】不同范围内的多个 ID 选择器? [关闭]【英文标题】:multiple Id selector in different scopes? [closed] 【发布时间】: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')
可能就是你想要的。但是,几乎不可能说出您在寻找什么,以及对您来说究竟是什么可靠/官方来源。
【参考方案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 来指定页面上的功能。
【讨论】:
以上是关于不同范围内的多个 ID 选择器? [关闭]的主要内容,如果未能解决你的问题,请参考以下文章
CSS里的HTML选择器、类选择器、ID选择器用于哪些范围?