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

回答

相關問題