высота jquery возвращает 0

свойство height jquery всегда возвращает 0. Я использую его вместе с Bootstrap. Не уверен, будет ли это конфликтом. Я прошел через несколько онлайн-рекомендуемых решений, но не исправил его. Ниже приведены фрагменты кода

/*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);

2 ответов


class="hidden-sm hidden-md hidden-lg" намеки на то, что это может быть display: none. В этом случае height не имеется. Показать его, измерить его, а затем спрячьте его.


вместо этого попробуйте следующее. окно.загрузка не является хорошим способом обработки элементов документа.

$(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);
});