Question

我通过Ajax调用创建了一个div class = box并附加到一个主div。此div class = box根据其内容更改其高度。我需要它的高度，但.height（）返回0 ....

$.ajax({  url: "json/news.json",
      dataType: "json",  
      contentType: "application/x-www-form-urlencoded;charset=UTF-8",
      success: function(data){
          var html ="<div class='box'>"+data.box+"</div>"; 
      } 
  });
 // now i want its height 
 var j = $('.box').height();

有什么建议吗？感谢

Answer 1

这里有两个问题：

$.ajax是异步的，因此在success回调运行之前它不会创建任何内容。如果你想测量你的盒子，你需要在回调中进行测量：

$.ajax({  url: "json/news.json",
  dataType: "json",  
  contentType: "application/x-www-form-urlencoded;charset=UTF-8",
  success: function(data){
      var html ="<div class='box'>"+data.box+"</div>"; 
      var j = $('.box').height();
  } 
});

您没有将html添加到任何内容中，因为它不是DOM的一部分，所以它不会有高度。您需要执行以下操作：

success: function(data){
  var html ="<div class='box'>"+data.box+"</div>"; 
  $("body").html(html);
  var j = $('.box').height();
}

Answer 2

在 ajax cal返回之前，代码的最后一行是执行的。将需要高度的代码放在回调中（实际上将 HTML添加到文档中）：

$.ajax({ url: "json/news.json", dataType: "json", contentType: "application/x-www-form-urlencoded;charset=UTF-8", success: function(data){ var html ="<div class='box'>"+data.box+"</div>"; var height = $(html).appendTo('body').height(); } });

Answer 3

试试http://api.jquery.com/outerHeight/

var j = $('.box')outerHeight();

获取动态创建的div的高度

3 个答案: