0

该死，我想通了... 见下文。我正在查询的 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 什么的……）。

4

4 回答 4

1

我想通了……我是个白痴……我没有意识到其中一个 CSS 规则是在开始时隐藏父 div，而几毫秒后的代码会使其可见。所以在 jQuery 查询它的位置时，图层被隐藏了，jQuery 的行为是（我没有意识到）在隐藏 div 时返回 0。几毫秒后，图层显示出来，现在 jQuery 按预期工作。当然，秘诀是在开始时不隐藏父 div 层。

谢谢回复的各位。你们看到它真是太棒了，修复了我愚蠢的错别字，并迫使我进一步研究它以制作一个有效的演示以更好地证明我的观点（这让我找到了解决方案）。

于 2013-03-19T20:21:35.477 回答
0

似乎对我有用，你有一些错别字：http: //jsfiddle.net/MQfqA/1/

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());
    }
}
于 2013-03-19T19:13:40.200 回答
0

你的语法错误。这现在有效

$(document).ready(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());
    }
}
于 2013-03-19T19:15:32.500 回答
0

我的印象还是您忘记在第 11 行关闭报价？

于 2013-03-19T19:15:39.933 回答