요소가 jQuery로 표시되는지 여부를 검출합니다.

요소가 jQuery로 표시되는지 여부를 검출합니다.

이 질문에는 이미 답변이 있습니다.

요소가 jQuery에 숨겨져 있는지 확인하려면 어떻게 해야 합니까? (65개 답변)

닫힘8년 전.

사용..fadeIn()그리고..fadeOut()페이지에 요소를 숨기거나 표시했지만, 하나는 숨김용, 하나는 표시용 두 개의 버튼이 있습니다.이제 두 버튼을 모두 전환할 수 있는 버튼이 하나 필요합니다.

현재 HTML/JavaScript:

<a onclick="showTestElement()">Show</a>
<a onclick="hideTestElement()">Hide</a>

function showTestElement() {
  $('#testElement').fadeIn('fast');
}

function hideTestElement() {
  $('#testElement').fadeOut('fast');
}

원하는 HTML/JavaScript:

<a onclick="toggleTestElement()">Show/Hide</a>

function toggleTestElement() {
  if (document.getElementById('testElement').***IS_VISIBLE***) {
    $('#testElement').fadeOut('fast');
  } else {
    $('#testElement').fadeIn('fast');
  }
}

요소가 표시되는지 아닌지는 어떻게 검출합니까?

대상 제품:

.is(':visible')

jQuery를 사용하도록 셀렉터를 변경해야 할 수도 있지만 다른 장소에서 사용할 수 있습니다.

if($('#testElement').is(':visible')) {
    // Code
}

대상 요소의 부모 요소 중 하나가 숨겨져 있는 경우,.is(':visible')아이가 돌아오면false(그건 말이 돼요)

j쿼리 3

:visible는 다수의 요소를 검사하기 위해 DOM 트리를 통과해야 하기 때문에 셀렉터가 느리다는 평판을 받고 있습니다.jQuery 3에는 좋은 소식이 있습니다.Ctrl이 투고에서는 (+ for:visible):

Google의 Paul Irish의 탐정 작업 덕분에 동일한 문서에서 :visible과 같은 커스텀 셀렉터를 여러 번 사용하면 추가 작업을 생략할 수 있는 경우가 몇 가지 발견되었습니다.그 특정 케이스는 현재 최대 17배 더 빨라졌습니다!

이러한 개선에도 불구하고 :visible 및 :hidden 등의 셀렉터는 브라우저에 의존하여 실제로 페이지에 요소가 표시되는지 여부를 판단하기 때문에 비용이 많이 들 수 있습니다.최악의 경우 CSS 스타일과 페이지 레이아웃을 완전히 재계산해야 할 수 있습니다.대부분의 경우 이러한 셀렉터의 사용을 권장하지는 않지만 이러한 셀렉터가 성능 문제를 일으키고 있는지 확인하기 위해 페이지를 테스트할 것을 권장합니다.

---

특정 사용 사례로 확장하면 다음과 같은 jQuery 함수가 내장되어 있습니다.

function toggleTestElement() {
    $('#testElement').fadeToggle('fast');
}

필요없어, 그냥 사용해fadeToggle()요소:

$('#testElement').fadeToggle('fast');

여기 데모가 있습니다.

if($('#testElement').is(':visible')){
    //what you want to do when is visible
}

언급URL : https://stackoverflow.com/questions/8774089/detect-if-an-element-is-visible-with-jquery