Question

我遇到了一个好的开发人员写的岁代码（是的，我个人认识他）来访问所有具有相同ID的元素。

bool status = true;

void signalHandler(int signum)
{
  std::cout<<"SigNum"<<signum;
  status = false;
  exit(signum);
}

int main()
{
  signal(SIGABRT, signalHandler);
  signal(SIGINT, signalHandler);
  signal(SIGSEGV, signalHandler);
  Context context;
  context.launch();
}

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

_masterQueue.wait_and_pop(data);

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

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

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

更新

请注意问题不在于使用什么替代品。我知道classSelectors和attributeSelectors，并且知道不建议使用重复的ID，但有时你只需按照它的方式使用多年的代码（如果你知道我的意思）。

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

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 + "'] "（行号297在ref链接中）选择具有匹配ID的所有元素。

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

Answer 2

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

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

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

但是，您不应该在同一页面上使用相同ID的两个元素。如果您需要CSS，请使用类。

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

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

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

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

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

Answer 3

所以在JS Fiddle我已经展示了一个jQuery正在做什么的例子。

https://jsfiddle.net/akp3a7La/

当你有

时

$('#choice,#choice');

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

在我的例子中，我向你展示了当你有这样的东西时它是如何做到的

$("#choice,li");

其中

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

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

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

Answer 4

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

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

4 个答案: