안녕하세요.
빅한입니다.
최근에 회사일로 너무 바쁜일들과 집안의 좋은 일들이 많아서 이제야 글을 쓰게 되네요.
지난번에 썼던글을 확인해보니 Form 필터에 대해서 했었군요!
그럼 오늘은 간단하게 두가지 필터에 대해서 알아보겠습니다.
종류
위에서 언급했다시피 오늘은 딱 두가지 필터! 보이는 것과 안보이는 것을 선택자 필터를 알아보겠습니다.
- :hidden - 숨겨진 모든 요소를 선택
- :visible - 보여지는 모든 요소를 선택
예제 소스
파일 구성은 다음과 같습니다.
+ root
+ lib
- jquery.js
+ selector
- selector_visibility_filter.html
예제 파일은 다음과 같습니다.
- selector_visibility_filter.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../lib/jquery.js"></script>
<style>
.block{
display: block;
}
</style>
</head>
<body>
<div>
<span>hidden count: </span><span id="hiddenCount"></span>
</div>
<div>
<span>visible count: </span><span id="visibleCount"></span>
</div>
<hr/>
<div id="test">
<input type="hidden"/>
<input style="display: none;"/>
<div style="display: none;"></div>
<div>div visible</div>
<input class="block" value="input visible" disabled/>
<span class="block">span visibel</span>
</div>
<script>
$(function () {
// 처음 로딩시 카운트.
var visibleCnt = $('#test :visible').length;
$('#visibleCount').html(visibleCnt);
var hiddenCnt = $('#test :hidden').length;
$('#hiddenCount').html(hiddenCnt);
})
</script>
</body>
</html>예제 설명
지난번의 이벤트처럼 버튼으로 주는 것이 아니라
처음 로드되면 보이는 요소와 보이지 않는 요소를 세어 화면에 표출하도록 해보았습니다.
예제소스중에서 살펴봐야 하는 부분은 아래 소스 입니다.
<div id="test">
<input type="hidden"/>
<input style="display: none;"/>
<div style="display: none;"></div>
<div>div visible</div>
<input class="block" value="input visible" disabled/>
<span class="block">span visibel</span>
</div>id="test"를 가진 div요소 안에서 보이는 요소와 안보이는 요소를 구분하면
처음 3줄이 안보이는 요소 다음 3줄이 보이는 요소일 것입니다.
즉 카운트를 세면 보이는 요소는 3, 안보이는 요소또한 3일 것입니다.
이를 확인하기 위해서 스크립트로 선택자 필드인 ':visible'과 ':hidden'을 사용하여 요소의 갯수를 확인해보겠습니다.
$('#test :visible').length;
$('#test :hidden').length;위의 문구를 브라우저의 콘솔(console)창에서 확인보셔도 좋고
예제 처럼 화면에 표출해보셔도 좋습니다.
우리가 예상했던 것처럼 출력이 되었나요?
출력결과는 아래와 같습니다.
예상 결과처럼 안보이는 요소(hidden count)와 보이는 요소(visible count)의 갯수가 같은 것을 확인하셨나요?
마무리
지금까지 Visibility Filter에 대해서 살펴보았는데요.
더 궁금하신 내용이나 잘못된 부분이있다면 댓글에 남겨주세요.
여기까지 읽어주셔서 감사합니다!
'Development > JavaScript' 카테고리의 다른 글
| [jQuery] 형식 선택자 (Form) (0) | 2019.12.10 |
|---|---|
| [jQuery] 내용 필터 선택자 (Content Filter) (0) | 2019.09.04 |
| [jQuery] 자식 필터 선택자(Child Filter) (0) | 2019.09.01 |
| [jQuery] 기본 필터 선택자(Basic Filter) (0) | 2019.06.30 |
| [jQuery] 속성 지시자(Attribute Selector) (0) | 2019.05.26 |
