jquery select without visible : visible

Question

jquery docs에서 요소가 숨겨져있는 경우 : 조상 요소가 숨겨져 있으므로 요소가 페이지에 표시되지 않습니다. 래퍼가

숨겨져 있기 때문에 실패가 어떤가요 :

나는 숨겨진 DIV와 (". 볼 MyClass에") 숨겨진 또는 볼

<div id="wrapper"> <-- this is hidden --> 
    <p class="myclass" style=">display:none">text</p> 
    <p class="myclass">text</p> 
    <p class="myclass" style=">display:none">text</p> 
    <p class="myclass">text</p> 
</div> 

그래서 어떤 선택 $ 될 수 있습니다 단락 안에 있습니다 다른 방법으로 래퍼 내부에 보이는 요소가 있는지 확인하고 계산합니다.

예를 들어 요소의 클래스가 myclass이고 CSS가 표시되어 있는지 확인하십시오. 아무 것도없는 해결책이지만 아무런 시도도 실패합니다. 그런 다음 $('.myclass:not(.hidden)').length와 "볼"사람을 믿을 수

.hidden { 
    display: none; 
} 

<div id="wrapper"> <-- this is hidden --> 
    <p class="myclass hidden"text</p> 
    <p class="myclass" >text</p> 
    <p class="myclass hidden">text</p> 
    <p class="myclass" >text</p> 
</div> 

:

는 어떤 도움을 내가 볼 수있는 유일한 방법은 (대신 인라인 스타일의) 요소를 숨 깁니다 사용자 정의 클래스를 추가하는 것입니다

Answer 1

평가 . 당신은 실제로 단지 display 속성이 none하지 않은 요소, .filter() 일을 할 수를 찾을 수있는 경우

:

---

업데이트는 물론

var count = $('.myclass').filter(function() { 
    return this.style.display !== "none";  
}).length; 

이하지 않습니다 일부 요소에 display:none이 설정되어 있고 UI 탭 플러그인이 아닌 경우 작동합니다. 그러나 그것은 당신의 상황에서 충분할 수도 있습니다.

Answer 2

시도 : 나는

Answer 3

내가 Felix's way를 사용하십시오 그것을 :) 시도 할 때

alert ($("#wrapper .myclass:visible").size()); 

결과는 2였다. 당신이 정말로 당신의 마크 업을 변경하지 않고 대안을 원하는 경우

하지만,이 작업을해야합니다 :

var wrapper, visibles; 
wrapper = $("#wrapper"); 
wrapper.show(); 
visibles = wrapper.find(":visible"); 
wrapper.hide(); 

Live example

을만큼 당신이 거기 수율 (setTimeout 등)을하지 않는 , 확률이 높을 때 브라우저는 래퍼가 표시된 짧은 간격 동안 실제로 아무것도 표시하지 않습니다.

Answer 4

당신은 예를 들어, 직접 디스플레이 속성을 확인할 수 있습니다

$('#wrapper p.myclass').each(function(){ 
alert($(this).attr('style')); 
} 

는 당신에게 스타일 속성의 값을 보여줍니다.

당신은 또한

this.style.display 직접 디스플레이 속성에 액세스 할 수 있습니다.