Question

我在最新版本的jQuery中使用$.each来计算按类名选择的DOM元素集合的高度，

$.each($('.some-class'), function() {
  console.log($(this).height());
}

我得到一个高度值列表，这些高度值似乎都是关闭的并且高于应有的值，640,657,334,487。

然而，当我进入我的控制台并计算第一个高度$('.some-class').first().height()时，我得到了553，这是准确的。

$ .each发生了什么？当我使用$(this)检查时，似乎选择了正确的console.log($(this))。

Answer 1

所以我回答了自己的问题。我在文档加载到$(document).ready(function(){...})块后执行代码，这意味着在文档加载完成后计算高度，但之前页面已完全加载并且所有我的$(document).ready块中的其他代码已完成加载。

当我在窗口完成加载后计算高度时，在

中

$(window).load(function(){...})

阻止，我能够获得正确的身高值。

我也没有提到我在开发模式下使用Ruby on Rails，因此资产（CSS等）在运行时被编译。我怀疑是在给定Rails资产管道的情况下，我的CSS样式在加载HTML文档时没有被加载，并且我的$(document).ready()块被触发了，所以我的样式可能还没有被应用到文档准备就绪，我的窗口已完成加载，然后影响我的DOM元素的高度。

在窗口完成加载$(window).load块后计算DOM高度，我可以确保在计算高度之前已经应用了我的CSS样式。

认为这是一个直接的jQuery问题。原来是一个潜在的Rails问题。

全部谢谢！

Answer 2

.height()始终返回内容高度，它不关心css box-sizing属性。如果您有或没有box-sizing:border-box，则不包括填充和边距。

您可以使用.css( "height" )代替.height()

为什么jQuery.each没有检索到正确的高度值？

2 个答案: