Как показать определенное кол-во блоков исходя из высоты родителя?

Question

[lynnikvadim]

Как показать определенное кол-во блоков исходя из высоты родителя ?

Есть блок, его высота не постоянная. В этом блоке есть еще блоки высотой 150px.
Как мне сделать так чтобы если высота родителя к примеру 500px - то показывать только три вложенных блока.

Comments

[Виталий Инчин ☢]

Вопрос закрыт?

Answer 1

[amatory10]

например так:

var outerDiv = document.getElementsByClassName('div1')[0];
if(outerDiv.offsetHeight === 500) {
  var divChild = outerDiv.children;
  for(var i = 0, max = divChild.length; i < max; i++)
    divChild[i].style.display = 'block';
}

Comments

[lynnikvadim]

а в css я должен прописать display: none; для дочерних (внутренних) элементов ?

[amatory10]

lynnikvadim: ну да если задача стояла открыть скрытые элементы.

Answer 2

[Виталий Инчин ☢]

var $block = $("#block"), height = $block.height();

$block.children().each(function(i){
   $(this)[i + 1 > Math.floor(height / 150) ? "hide" : "show"]();
});

или

$block.children().show()
    .filter(":nth-child(" + Math.floor(height / 150) + ") ~ *")
.hide();