jquery height returns 0

jquery的height属性总是返回0.我将它与Bootstrap一起使用。不确定是否会有冲突。我经历了几个在线推荐的解决方案，但没有解决它。下面是代码片段jquery height returns 0

/*html */ 
<div class="hidden-sm hidden-md hidden-lg" class="mobNewsEvents"> 
<div class="row"> 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
<h3 style="text-align: center;">Events</h3> 
<div class="mobEvents"> //need to get the height of this div element 
<ul> 
    <li>...</li> 
</ul> 
</div> 
</div> 
</div> 
</div> 

/*script*/ 
(function($){ 
$(window).load(function(){ 
    var temp = $('.mobEvents').height(); 
    alert(temp); 
}); 
})(jQuery);

来源

2013-10-05 Ram

是div'hidden'作为'class'值建议？那么它的高度是* 0. – Bergi

谢谢Bergi。我正在深入研究。你可能是对的。会让你知道这是否修复它。 – Ram

是的，它是除了我忘记注意到的显示属性之外的其中一个父类的显示属性。感谢您的帮助 – Ram

class="hidden-sm hidden-md hidden-lg"暗示，这可能是display: none。在这种情况下，height不可用。显示它，测量它，然后隐藏它。

来源

2013-10-05 19:40:07 Amadan

它看起来像显示属性设置为无。我会试一试。同时你会建议任何更好的解决方案来显示，测量和隐藏它，而不让客户知道UI中发生了什么？ – Ram

是的，它是除了我忘记注意到的显示属性之外的其中一个父类的显示属性。感谢您的帮助 – Ram

“任何更好的解决方案来显示，测量和隐藏它”如果高度显式设置在CSS中，您可以尝试解析CSS规则（我不会建议它！）;但除此之外，我不知道有什么办法。但是，“不让客户知道UI中发生了什么？”是不是真的正确 - 浏览器会做两次重新布局，但除了难以察觉的延迟（除非您的文档非常复杂），用户不应该注意任何事情。当您的JS线程完成时，浏览器将只会重绘，这与已经绘制的屏幕相同。 – Amadan

请改为尝试以下操作。 window.load不是处理文档元素的好方法。

$(document).ready(function(){ 
    var temp = $('.mobEvents').height(); 
    alert(temp); 
});

如果您有多个具有相同类的元素，它将只获得第一个元素。

$(document).ready(function(){ 
    var temp = $('.mobEvents':First).height(); 
    alert(temp); 
});

或者您可以使用

$(document).ready(function(){ 
    var temp = $('.mobEvents').attr("height").value(); 
    alert(temp); 
});

来源

2013-10-05 19:46:23 Tauseef

请给予赞赏的时间来欣赏答案和努力。 – Tauseef

是的，我明白的一点是班级名称不应该重复。还有一个问题是display属性设置为none。谢谢你的努力。 – Ram

@ user2425218定义类的目的是在许多元素上重复该类。隐藏的元素不会放置任何事件和属性。你应该真的使用'$（document）.ready（...）' – Tauseef

jquery height returns 0

回答

相关问题