我从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 });
解决方法
根据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"]');