jQuery：添加元素直到达到特定高度

Question

我左边有一个专栏文章。此高度是动态的，并根据发布的内容进行更改。我右边的列通常更短。我正在拉3个大元素然后另外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();
})

问题是我无法检查隐藏元素的高度，因此我使用hChecking var来假设新元素的高度约为60像素。这并不理想，因为它们可能少于或多于此。

任何方式让这个工作，同时仍然允许没有JS的人隐藏元素？谢谢！

Answer 1

这有效：

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