我左边有一个专栏文章。此高度是动态的,并根据发布的内容进行更改。我右边的列通常更短。我正在拉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的人隐藏元素?谢谢!
答案 0 :(得分:3)
这有效:
var containerDiv = $('#someElement');
while( containerDiv.height() < 500 ){
$('<p>Test</p>').appendTo(containerDiv);
}