为什么jquery选择器("id,id")选择具有重复ID的所有元素

Question

我遇到了一个好的开发人员编写的一年前代码(是的,我个人认识他)来访问具有相同id的所有元素.

$("#choice,#choice")

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

$("#choice")

它按预期返回第一个匹配项.

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

任何人都可以解释这是如何工作的？

UPDATE

请看问题不是关于使用什么替代品.我知道classSelectors和attributeSelectors,并且知道不建议使用重复的ID,但有时你只需按照它的方式使用多年的代码(如果你知道我的意思).

Answer 1

如果你看一下jQuery用来根据选择器选择元素的sizzle.js代码,你就会明白为什么会这样.它使用以下正则表达式来匹配简单ID,TAG或类选择器:

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

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

但是,我同意这个帖子中的其他人一样,对多个元素使用相同的ID并不是一个好主意.

Answer 2

因此，在 JS Fiddle 中，我展示了 jQuery 正在做什么的示例。

当你有一个

$('#choice,#choice');

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

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

$("#choice,li");

在哪里

物品实际上是您的#choice 物品。

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