Скрыть динамический ДИВ при переполнении

Question

В принципе у меня есть список Div с некоторыми дивами, который содержит некоторые изображения и тексты

<div id='item-list' style="height: 700px; overflow: hidden"> 
    <div id='item-1' style="overflow: hidden"> *some images and texts* </div> 
    <div id='item-2' style="overflow: hidden"> *some images and texts* </div> 
    <div id='item-3' style="overflow: hidden"> *some images and texts* </div> 
    ... 
</div> 

Моей деталь-лист имеет статическую высоту, которую я не хочу менять. Элемент item добавляется динамически каждый раз, когда пользователь создает элемент, где новые элементы добавляются в верхнюю часть списка.

Я хочу скрыть эти элементы, когда список элементов превышает высоту 700 пикселей. Я пытаюсь использовать переполнение скрытое, но вместо того, чтобы скрывать весь элемент div, он обрезает элемент до предела высоты.

Пример: теперь у меня есть 10 элементов с значками и текстами, а содержимое списка превышает высоту, поэтому вместо того, чтобы скрывать весь элемент div-item, он обрезает элемент-10 div, и я вижу только значки, но не текст.

Что делать, если я хочу скрыть весь элемент-10? Обратите внимание, что каждый элемент имеет разную высоту, определяемую тем, что пользователь вводит во время создания элемента.

Answer 1

Возможно, некоторые jQuery проверяют высоты отдельных предметов. Цикл по всем из ваших деталей и сделать что-то вроде этого:

var $totalHeight = 0; 
if($("#item-x").height() + $totalHeight < 700) { 
    $totalHeight += $("#item-x").height(); 
    $("#item-x").show(); 
} else { 
    $("#item-x").hide(); 
} 

По сути, вы хотите, чтобы проверить высоту отдельных элементов, а также увидеть, если при добавлении следующего пункта поставит его на 700px. Если этого не произойдет, покажите элемент, в противном случае - нет.

Если вы хотите получить фантазию, вы можете использовать jQuery, чтобы полностью удалить любые предметы из <div>, которые положили его на ваш лимит высоты.