jQuery : div의 두 위치 사이의 요소 수

Question

나는 태클하는 방법을 모르는 절망적 인 문제가 있습니다.

내 질문 : 뷰포트의 두 위치 (이 경우 스크롤 가능한 div)의 수를 결정하려면 어떻게합니까?

높이가 150px 인 스크롤 가능 <div>이 있지만 대다수가 숨겨져있는 뷰포트가 450px라고합니다. div에는 30px 높이의 자녀가 있으며 그 중 15 명이 높이 들었습니다.

질문 2 : n1과 n2 사이에 첫 번째 자녀가 몇 명 있는지 알 수는 있지만 매우 쉽지만 보이지는 않습니다.

jsFiddle 부분적으로 해결책을 찾았습니다. 최상위 값이 0으로 설정되어 있으면 작동하지만, 다른 것이 있으면 작동하지 않습니다. 예를 들어이 솔루션을 사용하면 0에서 200px 사이에 7 개의 가시적 인 div가 있음을 확인할 수 있습니다. 그러나 30px와 230px 사이의 숫자가 얼마인지 결정하기 위해 값을 변경하면 다시 0이되어야합니다.

도와주세요.

Answer 1

대신 사용해 :

var $this = $(this), 
    topOffset = $this.offset().top; 
if (topOffset >= top && topOffset <= bottom) { 
    elements++; 
} 

이 오프셋 상부합니다 (each())에서 현재 요소의이 top 변수의 값보다 큰지 여부를 확인 만 다음 elements을 증가시킨다. 이렇게하면 변수 height을 계속 업데이트 할 필요가 없습니다.

이 작업은 here에서 볼 수 있습니다.

Answer 2

'height'가 맨 위 값과 동일하게 변경되도록 변경하십시오.

귀하의 자바 스크립트이어야합니다 나를 위해 행운을했다

var container = $('div#container'), 
top = 30, 
bottom = 230, 
height = top, 
elements = 0; 

container.find('div').each(function(n) 
{ 
    if (top <= height && height < bottom) 
{ 
    height = height + $(this).height(); 
    elements++; 
    console.log(top, bottom, height, elements); 
} 
}); 

$('span.top').text(top); 
$('span.btm').text(bottom); 
$('span.num').text(elements); 

!