jQuery에서 요소가 숨겨져 있는지 확인하는 방법

1. jQuery에서 요소가 숨겨져 있는지 확인하는 방법
2. jQuery의:hidden 선택기 이해
3. 요소가 숨겨져 있는지 확인하는 빠른 팁

DOM의 모든 개체는 display의 CSS 속성을 none으로 할당하여 숨길 수 있습니다.

jQuery에서 요소가 숨겨져 있는지 확인하는 방법

먼저 제목 요소<h1>을 만들고 인라인 CSS 속성을 적용하여 숨 깁니다.

<h1 style="display:none;">Your text here</h1>

jQuery에는:hidden 및:visible 선택기의 두 가지 가시성 필터가 있습니다. 요소가 숨겨지고 표시되는지 각각 지정합니다. 다음과 같은 방법으로 쉽게 확인할 수 있습니다.

<script>
$(document).ready(function(){
//checks if document is ready
 if($("h1").is(":hidden")){
  alert("The heading is hidden.");
  //your function here
 } 
if($("h1").is(":visible"){
  alert("The heading  is visible.");
 }
});
</script>

제목이 숨겨져 있습니다라는 경고 메시지가 표시됩니다.

참고 : 하나는 숨겨져 있고 다른 하나는 표시되는 여러 요소를 배치하면is(":visible")및is(":hidden")이 모두 트리거됩니다.

jQuery의:hidden 선택기 이해

:hidden 선택기는 다음과 같은 이유로 요소를 숨김으로 식별합니다.

1. 값이 none인 CSS display속성이 있습니다.
2. 요소가type="hidden"인 양식 요소입니다.
3. 요소의 height및 width값은 명시 적으로 0으로 설정됩니다.
4. 상위 요소가 숨겨집니다.

따라서 CSS visibility 속성이hidden 또는opacity 속성이0으로 설정된 요소는 DOM에서 여전히 공간을 소비하므로 jQuery에서 볼 수있는 것으로 간주됩니다.

또는 요소의 특정 CSS 속성을 확인하여 숨겨져 있는지 확인하려면 다음 방법을 사용할 수 있습니다.

<script>
if ( $(h1).css('display') == 'none' || $(h1).css('opacity') == '0'){
alert("The heading is hidden.");
//your function here
}
</script>

요소가 숨겨져 있는지 확인하는 빠른 팁

jQuery는 네이티브 DOM querySelectorAll()메서드를 활용할 수 없습니다. 또한 브라우저가 가시성을 결정하기 위해 페이지를 다시 렌더링해야하므로 성능 문제가 발생합니다. 따라서 요소를 사용하는 대신 클래스 또는 CSS 선택기를 사용한 다음.find(":hidden")을 사용할 수 있습니다.

<h1 style="display:none;">Your text here</h1>
<script>
 $(document).ready(function(){
  var hiddenHeadings = $("body").find(":hidden").is("h1");
   if(hiddenHeadings.length > 0){
    alert("There is atleast one heading hidden.");
   }
 });
</script>

여기서 hiddenHeadings는 직접 액세스 할 수 있고 조작 할 수 있습니다.