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

Why does the jquery selector ("id,id") selects all elements with duplicate IDs

本文关键字：id quot 元素 选择器 jquery 选择 为什么      更新时间：2023-09-26

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

$("#choice,#choice")

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

$("#choice")

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

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

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

请注意，问题不是关于使用什么替代方案。我知道classSelectors和attributeSelectors，也知道不建议使用重复的id，但有时您必须按照多年前的方式生活(如果您知道我的意思)。

http://jsbin.com/zodeyexigo/1/edit?html、js、输出

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

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

，但由于所讨论的选择器是$("#ID,#ID")，它与选择器不匹配，并使用querySelectorAll (ref link中第270行)，它将选择器替换为"[id='" + nid + "'] " (ref link中第297行)，选择所有具有匹配ID的元素。

然而，我同意其他人在这个线程，这不是一个好主意，有多个元素相同的ID。

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

当你的CSS选择器只有一个ID选择器时(并且没有在特定的上下文中使用)，jQuery使用原生文档。方法，它只返回具有该ID的第一个元素。

然而，在另外两个实例中，jQuery依赖于Sizzle选择器引擎(或者querySelectorAll，如果可用的话)，它显然选择了两个元素。结果可能因浏览器而异。

但是，您不应该在同一个页面上有两个具有相同ID的元素。如果你需要在你的CSS中使用它，可以使用一个类来代替。

如果你必须通过重复的ID来选择，使用属性选择器:

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

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

注意:如果可能的话，你应该用一个标签选择器来限定这个选择器，像这样:

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

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

所以在JS Fiddle中，我已经展示了一个jQuery的例子。

https://jsfiddle.net/akp3a7La/

当你有

$('#choice,#choice');

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

在我的例子中，我会向你们展示它是如何做到的当你有像这样的

$("#choice,li");

其中

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

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

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

    • 相关文章：