如何在动态添加内容后计算div的高度？

Question

我有一个动态内容(图像和文字)的div.然后我需要计算div的高度并做一些事情.

然而,它目前在添加内容之前计算div的高度.

有人有解决方案吗？

$('#results').find('article').addClass(result); // add class to entire section
$('#results article').find('.details h1 span').html(title); // add title
$('#results article').find('.details p').html(message); // add message

var windowHeight = $('#results').find('article').innerHeight(); 

Answer 1

您的内容中可能包含图像.您将不得不等待他们加载:

var $results = $('#results'),
    $article = $results.find('article'),
    deferreds = [];

$article.addClass(result); // add class to entire section
$article.find('.details h1 span').html(title); // add title
$article.find('.details p').html(message); // add message

$results.find('img').each(function()
{
    var deferred = $.Deferred();

    deferreds.push(deferred);

    this.onload = function() { deferred.resolve(); }
});

$.when.apply($, deferreds).then(function()
{
    var windowHeight = $article.innerHeight();
});

此方法使用jQuery的Deferreds,这使得跟踪所有load事件变得非常容易.