html - 当有多个具有相同 ID 值的元素时，jQuery 是如何工作的？

Question

我从 Google 的 AdWords 网站获取数据，该网站包含多个具有相同 id 的元素。

您能否解释一下为什么以下 3 个查询没有得到相同的答案 (2)？

Live Demo

HTML:

<div>
    <span id="a">1</span>
    <span id="a">2</span>
    <span>3</span>
</div>

JS:

$(function() {
    var w = $("div");
    console.log($("#a").length);            // 1 - Why?
    console.log($("body #a").length);       // 2
    console.log($("#a", w).length);         // 2
});

Answer 1

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

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

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

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

---

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

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

看看 fiddle :http://jsfiddle.net/P2j3f/2/

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

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