javascript - jquery如何在加载动态内容后立即获得div的高度？

Question

var contentparanum = 1;
while($(".container").height() < 200){
        paranum++;
        $(".content").append("<p></p>");
        $(".content p:nth-child("+contentparanum+")").load("getcontent.php?paranum="+paranum);
        contentparanum++;
        //use load() to add content into container, when the height of container is over 200px the loop stops
}

问题是循环永远不会停止。我添加了 alert(".container"); 进入循环，我只得到0。似乎只有在while循环完成后才能获得容器的高度。我该如何解决这个问题？

---

我添加了具体代码

和这里的html代码

  <div class="container">
    <div class="content"></div>
  </div>

Answer 1

由于 .load() 是异步的，您将不得不等待回调再次调用加载。尝试这个：

    var contentparanum = 1;
    var paranum = 1;

    $("#load").click(function () {
        // Checks if the height is below 200 before making the first call
        if($(".content").height() <200) 
        {
            LoadContent();
        }
    });

    function LoadContent() {

        $(".content").append("<p></p>");

        $(".content p:nth-child(" + contentparanum + ")").load("getcontent.php?paranum=" + paranum,
           // This is the callback function 
           function (response, status, xhr) {
            if (status == "error") {
                alert(xhr.status + " " + xhr.statusText);
            }
            else {
                // Checks if the height is below 200 and if yes makes a recursive call 
                if ($(".content").height() < 200) {
                    contentparanum++;
                    paranum++;
                    LoadContent();
                }
                else {
                    return;
                }
            }
        })
    }

Answer 2

function loadContent(paranum) {
    $("#container").append("<p></p>")
    $("#container").children().last().load("getcontent.php?paranum="+paranum, function() {
        if($("#container").height() < 200) {
            window.setTimeout(loadContent, 0, paranum+1);
        }
    });
    }

$(function() {loadContent(1);});