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

我左边有一个专栏，里面有几篇文章。该高度是动态的，并根据发布的内容而变化。我的右侧有一列通常较短。我拉出 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 的人隐藏元素吗？谢谢！

这有效：

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