이렇게 할 수있는 충분한 공간이 있다면 div 만 표시하십시오.

Question

div를 표시 할 수있는 공간이 있으면 솔루션을 찾고 있습니다. 내 블로그의 게시물 페이지에

는

나는

No Nay Never post page

내가 포스트가 얼마나 오래에 따라 사이드 바 항목의 다른 번호를 보여주고 싶은 ...과 같이, 왼쪽 사이드 바에서 최신 게시물을 표시합니다. 현재 세 개의 div가 서로 다른 수의 항목을 표시하고이 스크립트를 실행합니다.

if ($("#contentheight").height()>960 && $("#contentheight").height()<1200) { 
    document.getElementById("threeposts").className += "hide"; 
} 
else if ($("#contentheight").height()>1200 && $("#contentheight").height()<1880) { 
    document.getElementById("fiveposts").className += "hide"; 
} 
else if ($("#contentheight").height()>1880) { 
    document.getElementById("sevenposts").className += "hide"; 
} 

그러나 이것은 매우 편리하며 매우 짧은 게시물의 경우 전혀 항목이 표시되지 않습니다.

예를 들어 7 개 항목을 코딩 할 수있는 방법이 있지만 상위 div가 취할 수있는만큼만 표시 할 수 있습니까? 나는 오버 플로우를 사용하여 시도 : 숨겨진하지만 당신은 최종 항목으로 반으로 잘게.

예를 들어, 3 개의 전체 항목을 저장할 충분한 공간이 있으면 표시되지만 나머지는 표시되지 않습니다.

Answer 1

원하는 너비로 DOM에 삽입되지 않은 숨겨진 div 또는 div를 만들 수 있습니다.

그런 다음이 div의 높이가 게시물의 길이를 초과 할 때까지 항목별로 항목을 삽입하십시오.
이제 div에 들어갈 항목의 수를 알 수 있습니다. 이 같은

Answer 2

시도 뭔가 :

$('#container').children().each(function() { 
    var top = $(this).top; 
    var height = $(this).height; 
    if (top + height > $(this).parent().height()) { 
    $(this).className += "hide"; 
    } 
});