4

我有一个页面，我希望彼此相邻的 div 具有相同的高度。

我有以下功能：

function setProjectsHeight() {
    var count = 0;
    $(".project").each(function() {
        if(count % 3 === 0) { 
            var highest = 0;
            for(i=count;i<=count+2;i++) {
                if($("div.project#"+i).height() > highest) { 
                    highest = $("div.project#"+i).height(); 
                }
            }
            console.log(highest);
        }
        count++;
    });
}

不知何故，高度总是为零。选择器似乎是正确的（经过测试），当 console.log() 具有相同选择器的宽度时，它返回 200（正确）。

编辑：刚刚解决了！ 不知何故，我想到在 css 中设置“body {display:none}”，并在 document.ready() 的末尾将此属性设置回“block”。我这样做是因为我使用 jQuery UI 按钮并且用户看到这些按钮从普通链接切换到 UI 布局。

当我删除此功能时，一切都恢复了。似乎在调用 setProjectsHeight() 时，body 仍然是 display:block。因此，没有计算出的高度。

谢谢你的帮助！

4

6 回答 6

3

尝试从 window.load() 事件而不是 document.ready() 调用该函数。

这个问题的原因是 jQuery 在所有 img/object/... 元素完成加载之前不会启动 width() 和 height() 设置 - 一旦页面被处理，ready() 就会触发，但此时某些对象可能仍在下载。

于 2012-05-16T13:23:42.800 回答
2

确保您有一个清除浮动的元素/应用 clearfix（如果有任何浮动）。如果你不这样做，至少父容器不会扩展到它应该有的高度。

也尝试使用.outerHeight()，因为这包括边框大小和填充。

于 2012-05-16T13:22:00.507 回答
1

您的选择器可能是错误的。您应该单独使用 id 选择器，因为 id 在文档中是唯一的并且查找速度最快：

$('#'+i)

也正如人们所提到的，以数字开头的 id 无效（但适用于大多数浏览器）

也有可能您的 DOM 中可能有重复的 id，在这种情况下，任何事情都不会像您期望的那样工作。dom id 必须是唯一的。

于 2012-05-16T13:26:26.123 回答
1

您确定每个.project元素都具有适当的 ID 属性吗，因为$("div.project#"+i)选择器需要一个 0、1、2 等的 ID？

于 2012-05-16T13:42:30.170 回答
0

如果标签 ID 是1, 2, 3那么请在项目后给空间

$("div.project #"+i)
于 2012-05-16T13:23:09.757 回答
0

刚刚解决了！不知何故，我想到在 css 中设置“body {display:none}”，并在 document.ready() 的末尾将此属性设置回“block”。我这样做是因为我使用 jQuery UI 按钮并且用户看到这些按钮从普通链接切换到 UI 布局。

当我删除此功能时，一切都恢复了。似乎在调用 setProjectsHeight() 时，body 仍然是 display:block。因此，没有计算出的高度。

谢谢你的帮助！

于 2012-05-19T00:38:39.517 回答