jQuery：特定の高さに達するまで要素を追加します。

Question

私はいくつかの記事で左側に列があります。この高さは動的であり、公開されたコンテンツに基づいて変化します。私は右の列が通常短いです。私は3つの大きな要素を引っ張ってきて、もう1つは5つの小さな要素を引っ張っています。そして、左側の列の高さに近づくまで、余分な要素で右側の列を埋めたいと思います。

私はすべての大きな要素（3）を引っ張って、これが左よりも短いと仮定します。次に、他の5つのクラスを非表示にしてクラスを貼り付ける（JSなしの場合）。今度は、5つの要素を繰り返して、左にある列より長くすることなく、もう追加できなくなるまで追加を続けます。ここで私がこれまで持っているものです。

var hLeft = $('#home-col-left').outerHeight(); 
var hRight = $('#home-col-right').outerHeight(); 
var hRunning = hChecking = 0; 

$('#home-col-right').children().each(function() { 
    hChecking = hRunning + 60; 
    if (hChecking < hLeft) $(this).removeClass('hidden'); 
    hRunning = hRunning + $(this).outerHeight(); 
}) 

問題は、私は新しいものが約60ピクセルの高されていることを前提としhCheckingのVARを使用するので、それが隠されている間、私は要素の高さを確認することができないということです。それはそれよりも少なくてもよいし、より大きくてもよいので理想的ではありません。

JSを使用せずに要素を非表示にしながら、これを実行する方法はありますか？ありがとう！

Answer 1

この作品：

var containerDiv = $('#someElement'); 
while(containerDiv.height() < 500){ 
    $('<p>Test</p>').appendTo(containerDiv); 
}