我从谷歌的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
});
发布于 2011-12-14 09:42:58
应该只有一个具有给定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中,您可以研究代码以找出任何给定的版本都在做什么,但由于这是非法的,所以不能保证它会随着时间的推移保持不变。根据我在jQuery中看到的,它首先检查选择器是否像#a
一样是一个简单的id,如果是,就使用document.getElementById("a")
。如果选择器比这个复杂,并且存在querySelectorAll()
,jQuery通常会将选择器传递给内置的浏览器函数,该函数将具有特定于该浏览器的实现。如果querySelectorAll()
不存在,那么它将使用Sizzle选择器引擎手动查找将具有自己的实现的选择器。因此,您可以在同一个浏览器系列中至少有三个不同的实现,这取决于确切的选择器和浏览器的新程度。然后,各个浏览器都将拥有自己的querySelectorAll()
实现。如果你想可靠地处理这种情况,你可能不得不使用你自己的迭代代码,就像我上面所演示的那样。
发布于 2015-11-27 20:52:16
如果您有多个具有相同id或相同名称的元素,只需为这些元素分配相同的类,并通过索引访问它们&执行所需的操作。
<div>
<span id="a" class="demo">1</span>
<span id="a" class="demo">2</span>
<span>3</span>
</div>
JQ:
$($(".demo")[0]).val("First span");
$($(".demo")[1]).val("Second span");
发布于 2018-10-21 01:11:51
每个人都说“每个id值在一个文档中只能使用一次”,但是当我们有一个愚蠢的页面有多个具有相同id的元素时,我们如何获取我们需要的元素。如果我们使用JQuery '#duplicatedId‘选择器,我们只会得到第一个元素。要实现选择其他元素,可以执行以下操作
$("[id=duplicatedId]")
您将使用id=duplicatedId获得一个包含所有元素的集合
https://stackoverflow.com/questions/8498579
复制相似问题