jquery height returns 0

Question

The height property of jquery always returns 0. I am using it along with Bootstrap. Not sure whether it would be of conflict. I went through several online recommended solutions but did not fix it. Below are the code snippets

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

Answer 1

class="hidden-sm hidden-md hidden-lg" hints that this might be display: none. In this case, height is not available. Show it, measure it, then hide it.

Answer 2

Try the following instead. window.load is not a good way to deal the document elements.

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

In case you have more than one elements with the same class, it will get the first element only.

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

or alternatively you can use

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