javascript - $(document).ready() 内的 div 高度为零

Question

据我所知，如果我们在 $(document).ready() 中编写 JQuery 代码，那么代码将在 DOM 完全渲染后执行。

我正在尝试计算 $(document).ready() 内的 div 高度，但它返回零高度。 但是当我在浏览器控制台中运行相同的代码时，它会返回正确的高度。

内容正在通过 Angularjs 加载。

JQuery:

$(document).ready(function (){
 // hide view more button if user bio content is less than 200 words
    var userBioLength = $('.userBioText > p').html().split(" ").length;
       if( userBioLength<=200){
       $('.userBioOverly').addClass("hide")
       $('.viewMore').addClass("hide")


    var textHeight = $(".userBioText").height();
    console.log(textHeight);  // return 0
    $('.userBioWrapper').css({height:textHeight + 10+'px'});
}

HTML:

 <div class="userBioWrapper">
       <div class="userBioText">
            <p>
               {{userInfo.bio}} 
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Id fugiat praesentium molestias aliquam quam cupiditate officiis eligendi dolor repellendus, recusandae voluptatem. Iste aliquam itaque rem tempore officia perspiciatis natus molestiae.
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Id fugiat praesentium molestias aliquam quam cupiditate officiis eligendi dolor repellendus, recusandae voluptatem. Iste aliquam itaque rem tempore officia perspiciatis natus molestiae.
              </p>
       </div>
      <div class="userBioOverly"></div>
 </div>

我很好奇为什么这种行为有所不同。我是不是做错了什么？

Answer 1

没有。

未完全渲染，但文档的事件ready，这意味着他从服务器下载了所有内容，其中包括原始 html。

Angular js 实际上在 jquery 准备完成后启动......

如果你想在 ng 完成后做一些事情，你需要在你的 Controller 或指令中设置一个超时，通常，除非有 ng-for，即使等待 0 毫秒它也会工作

编辑: 更多解决方案here (比我自己的好..)