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

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

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

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

---

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

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

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

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

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

这样做的原因是类型选择器效率更高比属性选择器。如果您使用类型选择器限定属性选择器，jQuery 将首先使用类型选择器来查找该类型的元素，然后仅在这些元素上运行属性选择器。这简直是​​效率更高了。

Answer 2

应该只有一个具有给定 id 的元素。如果您遇到这种情况，请参阅我答案的第二部分以获取选项。

规范未定义当多个元素具有相同 id（非法 HTML）时浏览器的行为方式。您可以测试所有浏览器并找出它们的行为方式，但使用此配置或依赖任何特定行为是不明智的。

如果您希望多个对象具有相同的标识符，请使用类。

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

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

如果您因为无法修复文档而想要可靠地查看具有相同 ID 的元素，那么您将必须进行自己的迭代，因为您不能依赖任何内置 DOM 函数。

你可以这样做：

function findMultiID(id) {
    var results = [];
    var children = $("div").get(0).children;
    for (var i = 0; i < children.length; i++) {
        if (children[i].id == id) {
            results.push(children[i]);
        }
    }
    return(results);
}

或者，使用 jQuery：

$("div *").filter(function() {return(this.id == "a");});

jQuery 工作示例： http://jsfiddle.net/jfriend00/ XY2tX/。

至于为什么会得到不同的结果，这与执行实际选择器操作的任何代码片段的内部实现有关。在 jQuery 中，您可以研究代码以找出任何给定版本正在执行的操作，但由于这是非法 HTML，因此无法保证它会随着时间的推移保持不变。从我在 jQuery 中看到的来看，它首先检查选择器是否是像 #a 这样的简单 id，如果是，则仅使用 document.getElementById("a").如果选择器比这更复杂并且存在 querySelectorAll() ，jQuery 通常会将选择器传递给内置浏览器函数，该函数将具有特定于该浏览器的实现。如果 querySelectorAll() 不存在，那么它将使用 Sizzle 选择器引擎手动查找将拥有自己的实现的选择器。因此，您可以在同一浏览器系列中拥有至少三种不同的实现，具体取决于确切的选择器和浏览器的新程度。然后，各个浏览器都将拥有自己的 querySelectorAll() 实现。如果您想可靠地处理这种情况，您可能必须使用自己的迭代代码，如我上面所示。

Answer 3

jQuery 的 id 选择器仅返回一个结果。第二个和第三个语句中的后代选择器和多个选择器旨在选择多个元素。它类似于：

语句 1

var length = document.getElementById('a').length;

...产生一个结果。

语句 2

var length = 0;
for (i=0; i<document.body.childNodes.length; i++) {
    if (document.body.childNodes.item(i).id == 'a') {
        length++;
    }
}

...产生两个结果。

语句 3

var length = document.getElementById('a').length + document.getElementsByTagName('div').length;

...也产生两个结果。

Answer 4

当我们有一个愚蠢的页面，其中包含多个具有相同 ID 的元素时，我们该如何获取所需的元素呢？如果我们使用“#duplicateId”，我们只能得到第一个元素。要实现选择其他元素，您可以执行以下操作：

$("[id=duplicatedId]")

您将获得一个包含 id=duplicateId 的所有元素的集合。

Answer 5

从 id 选择器 jQuery 页面：

每个 id 值只能在一个文档。如果多个元素被分配了相同的 ID，则使用该 ID 的查询将仅选择 DOM 中第一个匹配的元素。然而，不应依赖这种行为；具有多个使用相同 ID 的元素的文档是无效的。

淘气的 Google。但他们甚至没有关闭我听到的 和 标签。但问题是，为什么 Misha 的第二个和第三个查询返回 2 而不是 1。

Answer 6

如果您有多个具有相同 id 或相同名称的元素，只需为这些多个元素分配相同的类并通过索引和访问它们即可。执行您所需的操作。

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

杰Q：

$($(".demo")[0]).val("First span");
$($(".demo")[1]).val("Second span");

Answer 7

访问单个项目

<div id='a' data-options='{"url","www.google.com"}'>Google</div>
<div id='a' data-options='{"url","www.facebook.com"}'>Facebook</div>
<div id='a' data-options='{"url","www.twitter.com"}'>Twitter</div>


$( "div[id='a']" ).on('click', function() {
$(location).attr('href', $(this).data('options').url);
});

Answer 8

您可以简单地编写 $('span#a').length 来获取长度。

这是您的代码的解决方案：

console.log($('span#a').length);

尝试 JSfiddle：
https://jsfiddle.net/vickyfor2007/wcc0ab5g/2/