jQuery에서 :visible 선택자를 사용하면 현재 화면에 실제로 보이는 요소만 선택할 수 있습니다. 이 선택자는 display:none 등으로 숨겨진 요소를 자동으로 제외하기 때문에, 화면에 나타난 텍스트만 골라서 처리할 때 매우 유용합니다.
:visible 선택자란?
:visible은 jQuery에서 제공하는 특수 선택자로, 다음 조건을 만족하는 요소를 '보이는 상태'로 판단합니다.
- 문서 내에 존재하면서 너비와 높이가 0보다 큰 요소
display:none또는visibility:hidden으로 숨겨져 있지 않은 요소
반대로 숨겨진 요소만 선택하고 싶다면 :hidden 선택자를 사용하면 됩니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="myDiv">
<span class="test" style="display:none"><b>Test Class</b></span>
<span class="demo"> <b>Demo class</b></span>
</div>
<script>
$('#myDiv').children(":visible").text()
</script>
</body>
</html>위 코드에서 핵심은 $('#myDiv').children(":visible").text() 부분입니다. #myDiv의 자식 요소 중에서 현재 보이는 것만 골라 텍스트를 가져오기 때문에, display:none이 적용된 첫 번째 span의 "Test Class"는 제외되고 두 번째 span의 "Demo class"만 반환됩니다.
실행 방법
위 프로그램을 실행하려면 파일 이름을 "anyName.html(또는 index.html)"로 저장한 뒤, 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. VS Code 편집기에서 "Open with Live Server" 옵션을 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.
실행 결과
프로그램을 실행하면 아래와 같이 화면에 보이는 텍스트만 출력됩니다.
