当有多个具有相同“id”的元素时,jQuery如何工作?

前端之家收集整理的这篇文章主要介绍了当有多个具有相同“id”的元素时,jQuery如何工作?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我从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
});

解决方法

根据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"]');
原文链接:https://www.f2er.com/jquery/185214.html

猜你在找的jQuery相关文章