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 变量假设新元素的高度约为 60 像素。这并不理想，因为它们可能比这更少或更多。

有什么方法可以让它工作，同时仍然允许为没有 JS 的人隐藏元素？谢谢！

Answer 1

这行得通：

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