不同范围内的多个 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选择器用于哪些范围?

Angular:如何配置日期选择器以禁用多个日期范围?

日期范围选择器类似于 Google Analytics 日期范围选择器? [关闭]

CSS--选择器

我有一个关于 jQuery ID 选择器的问题 [关闭]

在反应中以编程方式关闭蚂蚁设计范围选择器