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

Question

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

4

我左侧有几篇文章的栏目。该栏目高度是动态的，基于发布的内容而变化。我右边有一个通常较短的栏目。我拉取了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像素。这并不理想，因为它们的高度可能小于或大于60像素。

有没有办法在允许元素对于没有JS的人仍然隐藏的情况下使其正常工作？谢谢！

- joshcanhelp

为什么不直接将右侧列的高度设置为与左侧列相等，然后使用 overflow-y:hidden 呢？ - Ilia G

类似于这个 http://jsfiddle.net/liho1eye/nSATB/ - Ilia G

被添加的框的高度会发生变化，它们是文本，所以如果我将溢出设置为隐藏，很可能只会截断一些文本。 - joshcanhelp

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- iND · Accepted Answer

这是有效的：

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