보이는 요소의 수를 정의

Question

일부 소개 :
안녕, 난 그가 어떤 버튼을 클릭 할 때 사용자가 볼 수 있습니다 얼마나 많은 "탭"의 알고, 쉬운 방법이 있는지 물어 싶어?

내가 지금까지 무엇을의

설명 : 여기에
http://jsfiddle.net/L7bPc/7/
당신이 확대되면, jsfiddle에, 당신이, 내가 생각하고 탭의 예를 참조하거나 (폭, 더 많거나 적은 탭을 볼 수 있습니다 축소 "overflow : hidden; 덕분에 휴식이 사라집니다.).

질문 :
내 질문이있다 알아 갈 수있는 쉬운 방법이, 얼마나 많은 탭 한 번 오른쪽 상단에 빨간색 사각형을 클릭 볼 수 있습니다?

달성하고자하는 목표에 대한 설명 :
왜? 왜냐하면 나는 "보이지 않는"탭 목록을 생성하려고하기 때문에 나중에 붉은 색 사각형을 클릭한다. (나는 그것을 적당히 스타일링 할 것이다.) 탭이있는 많은 프로그램과 비슷하게 보이기를 원합니다. 너무 많으면 드롭 다운 메뉴에서 탭의 나머지 부분을 확장하기 위해 작은 화살표를 찾을 수 있습니다. 얼마나 많은 탭이 표시되는지, 얼마나 많은 탭이 있는지 (그래서 드롭 다운에서 클릭 한 후 생성 할 항목을 알 수 있음), 나는 이 아닙니다. 드롭 다운을 만드는 방법을 묻는입니다.

이 부분은 MySQL 데이터베이스에서 데이터를 받고, PHP에 의해 생성하고 (난, jsfiddle에 그냥 일반 html로 PHP를 사용하지 않은) 탭처럼 보이도록 CSS에서 그들을 스타일 :

<div class="tabs"> 
    <ul> 
     <li id=090NCI class='active'><a href='#' class='active'><span class='active'>090NCI</span></a></li> 
     <li id=061PPP><a href='#'><span>061PPP</span></a></li> 
     <li id=072KWM><a href='#'><span>072KWM</span></a></li> 
     <li id=057ALS><a href='#'><span>057ALS</span></a></li> 
     <li id=099AKG><a href='#'><span>099AKG</span></a></li> 
     <li id=090WPW><a href='#'><span>090WPW</span></a></li> 
     <li id=020MSM><a href='#'><span>020MSM</span></a></li> 
     <li id=014LSP><a href='#'><span>014LSP</span></a></li> 
     <li id=010AAV><a href='#'><span>010AAV</span></a></li> 
     <li id=080MKS><a href='#'><span>080MKS</span></a></li> 
     <li id=006ALS><a href='#'><span>006ALS</span></a></li> 
     <li id=007KSG><a href='#'><span>007KSG</span></a></li> 
     <li id=091AOW><a href='#'><span>091AOW</span></a></li> 
     <li id=004ALO><a href='#'><span>004ALO</span></a></li> 
     <li id=003WWW><a href='#'><span>003WWW</span></a></li> 
     <li id=002KSO><a href='#'><span>002KSO</span></a></li> 
     <li id=001NWD><a href='#'><span>001NWD</span></a></li> 
    </ul> 
    <div style="position: absolute; right:5px; top:26px; background: red; color:red; width:20px; height: 20px;" onclick="dosomething()"></div> 
</div> 

모든 팁을 ? 솔루션은 jQuery와 javascript 모두에서 큰 차이는 없습니다.

Answer 1

이 시도 :

$("#redbox").click(function() { 

    var visibleLis = $("li").filter(function() { 
     var offset = $(this).offset(); 
     return $(document.elementFromPoint(offset.left, offset.top)).closest(this).length > 0; 
    }); 

    alert(visibleLis.length); 
}); 

http://jsfiddle.net/L7bPc/11/

를 완전히 수직 탭을 포함하도록 .tabs을 정의한 경우, 당신은 훨씬 더 최적화 된 버전 사용할 수 있습니다

$("#redbox").click(function() { 

    var boundingBox = $(".tabs")[0].getBoundingClientRect(), 
     bbRight = boundingBox.left + boundingBox.width, 
     bbBottom = boundingBox.top + boundingBox.height, 
     bbLeft = boundingBox.left, 
     bbTop = boundingBox.top; 

    var visibleLis = $("li").filter(function() { 
     var box = this.getBoundingClientRect(), 
      left = box.left, 
      top = box.top, 
      right = box.left + box.width, 
      bottom = box.top + box.height; 
     return left >= bbLeft && right <= bbRight && top >= bbTop && bottom <= bbBottom; 
    }); 

    alert(visibleLis.length); 
}); 

http://jsfiddle.net/L7bPc/13/