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

Question

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

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

现场演示

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规范，具有2个具有相同ID的元素不是有效的html。

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

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

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

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

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

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

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

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