Question

我有一个页面，我希望彼此相邻的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仍然显示：block。因此，没有计算出的高度。

感谢您的帮助！

Answer 1

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

这个问题的原因是，jQuery不会启动width（）和height（）设置，直到所有img / object / ...元素都完成加载 - ready（）会在页面出现时立即触发已处理完毕，但某些对象可能仍在下载。

Answer 2

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

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

Answer 3

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

$('#'+i)

正如人们所提到的那样，无法使用数字开头的id（但在大多数浏览器中都有效）

你的DOM中也可能有重复的id，在这种情况下，没有什么能像你期望的那样工作。 dom ID必须是唯一的。

Answer 4

您是否确定每个.project元素都具有相应的ID属性，因为$("div.project#"+i)选择器需要ID为0,1,2等？

Answer 5

如果标签ID为1, 2, 3，请在项目后留出空格

$("div.project #"+i)

Answer 6

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

当我删除此功能时，一切都恢复了。看来当setProjectsHeight（）被调用时，body仍然显示：block。因此，没有计算出的高度。

感谢您的帮助！

jQuery .height（）无法按预期工作

6 个答案: