如何获取ajax加载内容的高度？

Question

在我的页面中，我通过.load（）在div中加载动态内容。在这个加载的div中我有一个subanvi，我在加载的内容中加载额外的内容。这到目前为止是完美的。

但是在加载之后，我想对包装的高度进行动画处理（除了页脚外，这些页面都是围绕页面的），但不知道如何导致我的函数只获取第一个显示内容的高度。如何获得新加载内容的高度？

这是我的函数：

$(function(){ 

     var 
     $subContent = $(".subcontent"), 
     $subWrap = $(".maincontent"), 
     $newWrap = $("#wrapper"), 
     subHeight = 0, 
     $el; 

     $newWrap.height($newWrap.height()); 
     subHeight = $newWrap.height() - $subContent.height(); 

     $("ul.linkbox li a").live('click', function (e) { 
    newLink = $(this).attr("href"); 
     e.preventDefault(); 

    $(".textbox").find(".subcontent").fadeTo(200,0, function() { 

    $(".textbox").load(newLink + " .subcontent" , function() { 

    $(".subcontent").fadeTo(200,1, function() { 

     $newWrap.animate({height: subHeight + $subContent.height() + "px"}); 

    }); 
    }); 
    }); 
     }); 

}); 

Answer 1

您计算subHeight任何动画发生之前

subHeight = $newWrap.height() - $subContent.height(); 

然后用它之后的一些动画发生在你的元素

$newWrap.animate({height: subHeight + $subContent.height() + "px"}); 

这可能会影响你的代码的行为。 我建议您在需要时再次重新计算subHeight：

$newWrap.animate({height: $newWrap.height() - $subContent.height() + $subContent.height() + "px"}); 

Answer 2

如果我没有误会你，你正在试图让这Ajax响应内部发出的内容高度。我知道的第一种方式是$('#objectId').attr('height')。

var heightOfSubContentn = $(".textbox").find(".subcontent").attr("height") 

Answer 3

从你的问题采取的措施（请切勿将回答质疑）：

我刚刚添加下面的代码来得到它现在的工作：

$("#wrapper").css("height","auto"); 

Answer 4

根据我的经验，可靠地获取高度的唯一方法是创建（通过页面加载或在ajax执行时即时）动态创建一些通过css放置在用户视图外的容器：

#stage { 
    /* hide the container while maintaining ability to render content */ 
    visibility: hidden; 
    opacity:0; 

    /* position out of view of user */ 
    position: absolute; 
    z-index: -1; 

    top: -9999em; 
    left: -9999em; 
} 

注意：如果你要载入您的Ajax内容到区域都有一组宽度确保这个宽度应用到#stage元素太多，否则呈现的内容将不正确的高度。

如果这是一次性用例，那么您当然可以在css中强制编码宽度，或者您可以根据内容区域设置触发ajax负载的单击事件的宽度。

这里是你怎么想，现在结构AJAX负载的例子：

// We're assuming that the content area is #area 
// and that the out-of-view stage is #stage 
// .myTrigger can be anything really, probably a link that get's the new content via an href. 

$('.myTrigger').click(function(event) { 
    var stage = $('#stage'), 
     area = $('#area'); 

    // get the width of the destination and set this to be the width of your stage container. 
    stage.width(area.width()); 

    // fire the ajax request 
    $.ajax({ 
     url: 'whatevertheURLis', 
     type: 'GET', 
     dataType: 'html', 
     complete: function (xhr, textStatus) { 
      var ajaxContent = $(xhr.responseText); 
      var newHeight = stage.append(ajaxContent).getHeight(); // this will be a number 

      // we're now setting the new height onto our content area element and then inject the ajax content. 
      // the area.height(newHeight) could equally be an animate statement with the html(ajaxContent) being run in its callback. 
      area.height(newHeight).html(ajaxContent); 
     } 
    }); 


}); 

// helper function to get the height quickly from the stage element. 
$.fn.getHeight = function() { 
    var stage = $('#stage'); 
    // store content height. 
    var stageHeight = stage.height(); 

    // remove the temporary content. 
    stage.children().remove(); 

    // return the height. 
    return stageHeight; 
}; 

希望这有助于。