visible 선택자
선택자 :visible는 페이지에서 보이는 모든
요소를 선택합니다.
visibility: hidden 또는
opacity: 0로 설정된 요소는 레이아웃에서 공간을 차지하므로
보이는 것으로 간주됩니다.
요소가 문서에서 공간을 차지하면 보이는 것으로 간주됩니다.
보이는 요소는 너비와 높이가 0이 아닙니다.
:visible가 CSS 스펙에 속하지 않기 때문에,
최신 브라우저에서 성능을 향상시키려면 먼저 순수 CSS 선택자를 사용하여
요소를 필터링한 다음
.filter(':visible')를 적용하는 것이 좋습니다.
클래스와 같은 다른 방법으로 요소 가시성을 추적하는 것이
더 나은 성능을 보장할 수 있습니다.
구문
보이는 요소를 이렇게 선택합니다:
$(':visible');
예시
버튼을 클릭하면 보이지 않는 사각형들을 보여줍니다. "보이는" 사각형을 클릭하면 배경색이 노란색으로 바뀝니다:
<button id="show">표시</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
div {
width: 40px;
height: 40px;
margin: 5px;
border: 2px outset green;
float: left;
}
$('div:visible').click(function() {
$(this).css('background', 'yellow');
});
$('#show').click(function() {
$('div:hidden').show('slow');
});
