为什么jquery选择器（“id，id”）会选择所有具有重复ID的元素答案

【问题标题】：Why does the jquery selector ("id,id") selects all elements with duplicate IDs为什么jquery选择器（“id，id”）会选择所有具有重复ID的元素
【发布时间】：2015-08-18 15:19:30
【问题描述】：

我遇到了一些由一位优秀的开发人员（是的，我个人认识他）编写的岁代码，用于访问具有相同 id 的所有元素。

$("#choice,#choice")

它返回所有具有 id 的元素。但是如果我们使用下面的

$("#choice")

正如预期的那样，它只返回第一个匹配项。

搜索了一段时间后，我无法找出任何指向他技术的官方链接，关于它如何选择所有具有重复 id 的元素。

谁能解释一下这是如何工作的？

更新

请看问题不是关于使用什么替代品。我知道 classSelectors 和 attributeSelectors 并且知道不建议使用重复的 ID，但有时您只需要按原样使用多年的代码（如果您知道我的意思的话）。

http://jsbin.com/zodeyexigo/1/edit?html,js,output

【问题讨论】：

id 属性为 HTML 元素指定一个唯一的 id（该值在 HTML 文档中必须是唯一的）。使用类而不是 id
"all elements have the same id" 和什么相同的id？
“由优秀的开发人员编写”但未正确使用 DOM 属性，例如 id。
可能 DOM 是别人很久以前写的，他必须想办法在不干扰其他任何东西的情况下选择所有元素。
这是一个小提琴演示-他在问-jsfiddle.net/ccunbs3s

标签： javascript jquery html jquery-selectors

【解决方案1】：

如果您查看 jQuery 用于基于选择器选择元素的 sizzle.js 代码，您就会明白为什么会发生这种情况。它使用以下正则表达式来匹配简单的 ID、TAG 或类选择器：

// Easily-parseable/retrievable ID or TAG or CLASS selectors
rquickExpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,

但由于有问题的选择器是$("#ID,#ID")，它与选择器不匹配并使用querySelectorAll（参考链接中的第270行），它将选择器替换为"[id='" + nid + "'] "（参考链接中的第297行）选择所有具有匹配 ID 的元素。

但是，我同意这个帖子中的其他人的观点，即多个元素使用相同的 ID 并不是一个好主意。

【讨论】：

你忘了提到像#id 这样的选择器被传递给document.getelementById()。

【解决方案2】：

所以在 JS Fiddle 中，我展示了一个 jQuery 正在做什么的示例。

https://jsfiddle.net/akp3a7La/

当你有一个

$('#choice,#choice');

实际上是两次获取对象的所有实例#choice，然后过滤掉所有重复项。

在我的示例中，我向您展示了当您有类似的东西时它是如何做到的

$("#choice,li");

在哪里

项目实际上是您的#choice 项目。

在 Jquery 文档中 https://api.jquery.com/multiple-selector/

它谈到了多个选择器，我认为这就是这里发生的事情，您的开发者朋友选择了两次相同的 ID，它会返回两次。因为您在一个页面上只能有一个具有相同 ID 的输入（良好的 html 语法）

【讨论】：

不，它返回具有相同 id 的所有元素（两个以上）。
在此页面上，$("#notify-container,#notify-container")仅为我返回一个元素。
@coding_idiot：如果我们知道您使用的是什么 HTML，这可能会有所帮助。
愚蠢的问题，为什么它们的多个容器在一个 id 相同的页面上，如果它用于样式设置，您将使用类属性 $(".choice") 或者如果您有具有相同名称属性的选项您将使用类似 $('[name=choice]') 的东西。但是您的问题询问了双重选择器是什么，它被称为多重选择器。

【解决方案3】：

根据 W3C 规范，具有相同 ID 的 2 个元素不是有效的 html。

当您的 CSS 选择器只有一个 ID 选择器（并且未在特定上下文中使用）时，jQuery 使用本机 document.getElementById 方法，该方法仅返回具有该 ID 的第一个元素。

然而，在其他两个实例中，jQuery 依赖于 Sizzle 选择器引擎（或 querySelectorAll，如果可用），它显然选择了这两个元素。结果可能因浏览器而异。

但是，您决不能在同一个页面上有两个具有相同 ID 的元素。如果您的 CSS 需要它，请改用类。

如果您绝对必须通过重复 ID 进行选择，请使用属性选择器：

$('[id="a"]');

看看小提琴：http://jsfiddle.net/P2j3f/2/

注意：如果可能，您应该使用标签选择器来限定该选择器，如下所示：

$('span[id="a"]');

【讨论】：

【解决方案4】：

在页面上有重复的 id 使您的 html 无效。 ID 是页面上一个元素的唯一标识符 (spec)。使用类，对您的情况相似的元素进行分类，$('.choice') 将返回一组元素

【讨论】：

请查看更新后的问题，我知道如何让它变得更好，但想知道为什么或更好地把“如何”放在首位。