该死,我想通了... 见下文。我正在查询的 div 层通过 CSS 隐藏,然后在我的位置查询后在 JS 中显示。因为我从来没有看到它被隐藏,所以我没有意识到它是隐藏的,这就是 jQuery 返回 0,0 的原因。
我觉得自己像个白痴。
下面的代码只是说明性的,包含了我认为必要的所有代码,但它遗漏了关键的 CSS 定义和关键的 JS 调用:
我有一个 div 层,其中包含一些用于菜单项的子 div 层。
<div id="menuItems">
<div id="menuItem0">Menu Item 0</div>
<div id="menuItem1">Menu Item 1</div>
</div>
位置和尺寸在外部 CSS 中定义。
#menuItem0 { top: 0px; left: 100px; height: 40px; width: 200px; background-color: green;}
#menuItem1 { top: 0px; left: 350px; height: 40px; width: 200px; background-color: red;}
并且在加载脚本时应该显示菜单项的位置和尺寸:
$(window).load(function () {
prepareMenuItems();
});
function prepareMenuItems() {
var numberOfMenuItems = $("#menuItems").children().length;
for (var i=0; i<numberOfMenuItems; i++) {
console.log("left: "+$("#menuItem" + i).position().left +
" top:" + $("#menuItem" + i).position().top +
" w:" + $("#menuItem" + i).width() +
" h:"+ $("#menuItem" + i).height());
}
}
在我的现场演示中,我在 Google Chrome(最新)中看到的是:左:0 上:0 w:200 h:40 左:0 上:0 w:200 h:40
左边和顶部不应该是零。
如果我在页面加载后强制中断,Chrome 调试器将正确评估 $("#menuItem0").position().left 上的手表。但是为什么不加载呢?它吐出正确的宽度和高度,因此显然已加载 CSS。它稍后会知道答案,因为强制休息会给出正确的答案,所以这不是我在看错误的位置。
帮助!它快把我逼疯了。
(对不起,我试图说明而不是文字,我没有意识到人们会测试给定的代码 。Magritte 通过 Fiddler 这样做并且代码按预期工作,所以它必须与外部引用有关到 CSS 或 JS 什么的……)。