[javascript] jQuery에서 요소가 숨겨져 있는지 어떻게 확인합니까?

JAVASCRIPT / 글쓴이

그것은 요소의 표시를 전환하는 기능을 사용하는 것이 가능하다 .hide(), .show()또는 .toggle()?

요소가 visible또는 인지 어떻게 테스트 hidden합니까?

답변

질문은 단일 요소를 참조하므로이 코드가 더 적합 할 수 있습니다.

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");

twernt의 제안 과 동일 하지만 단일 요소에 적용됩니다. 그리고 JQuery와 FAQ에서 권장하는 알고리즘을 일치합니다 .

jQuery의 is ()를 사용하여 선택한 요소를 다른 요소, 선택기 또는 jQuery 객체로 확인합니다. 이 메소드는 DOM 요소를 따라 이동하여 일치하는 항목을 찾고 전달 된 매개 변수를 충족시킵니다. 일치하는 것이 있으면 true를 반환하고 그렇지 않으면 false를 반환합니다.

답변

hidden선택기 를 사용할 수 있습니다 .

// Matches all elements that are hidden
$('element:hidden')

그리고 visible선택기 :

// Matches all elements that are visible
$('element:visible')

답변

if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // 'element' is hidden
}

위의 방법은 부모의 가시성을 고려하지 않습니다. 부모도 고려하려면 .is(":hidden")또는 을 사용해야합니다 .is(":visible").

예를 들어

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

위의 방법은 div2보이지 :visible않지만 가시적 인 것으로 간주됩니다 . 그러나 위의 경우 많은 경우에 유용 할 수 있습니다. 특히 숨겨진 조건에서 :visible작동하지 않기 때문에 숨겨진 부모에 오류 div가 있는지 확인해야 할 때 특히 유용 합니다.

답변

이 답변들 중 어느 것도 내가 질문으로 이해 한 것에 대해 언급하지visibility: hidden 않았는데, 내가 찾은 것은 “내가 가진 항목을 어떻게 처리 합니까?” . 어느 쪽 :visible도 아니다 :hidden그들은 모두 문서에 따라 디스플레이를 찾고,이 처리되지 않습니다. 내가 결정할 수있는 한 CSS 가시성을 처리 할 수있는 선택기가 없습니다. 다음은 해결 방법입니다 (표준 jQuery 선택기, 더 요약 된 구문이있을 수 있음).

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

답변

에서 어떻게 전환 요소의 상태를 확인할 수 있습니까?

:visible및 :hidden선택기 를 사용하여 요소 축소 여부를 확인할 수 있습니다 .

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

가시성에 따라 요소에 단순히 작용하는 경우 선택기 표현식에 포함 :visible시키거나 포함시킬 수 있습니다 :hidden. 예를 들면 다음과 같습니다.

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');

답변

어떤 것이 눈에 보이는지 아닌지를 확인하는 경우, 즉시 바로 가서 다른 것을 할 것입니다. jQuery 체인은 이것을 쉽게 만듭니다.

따라서 선택기가 있고 표시되거나 숨겨져있는 경우에만 조치를 수행하려는 경우 수행하려는 조치 와 함께 체인을 사용 filter(":visible")하거나 filter(":hidden")연결할 수 있습니다.

따라서 if다음과 같은 진술 대신 :

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

또는 더 효율적이지만 더 추악합니다.

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

한 줄에 모두 할 수 있습니다.

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

답변

:visible에 따라 선택 JQuery와 문서 :

  • CSS display값은 none입니다.
  • 그것들은을 가진 폼 요소들입니다 type="hidden".
  • 너비와 높이는 명시 적으로 0으로 설정됩니다.
  • 조상 요소가 숨겨져 있으므로 요소가 페이지에 표시되지 않습니다.

배치에서 공간을 여전히 소비하므로 요소가 visibility: hidden있거나 표시 opacity: 0되는 것으로 간주됩니다.

display != none부모 가시성을 무시하고 요소가 보이는지 ( ) 확인하고 싶을 때 수행하는 .css("display") == 'none'것이 더 빠를뿐만 아니라 가시성 검사를 올바르게 반환 하기 때문에 어떤 경우에는 유용하고 다른 경우에는 쓸모 가 없습니다.

표시 대신 가시성을 확인하려면 다음을 사용해야합니다 .css("visibility") == "hidden"..

추가 jQuery 참고 사항도 고려 하십시오 .

:visiblejQuery 확장이며 CSS 스펙의 일부가 아니기 때문에 사용하는 쿼리 :visible는 기본 DOM querySelectorAll()메소드가 제공하는 성능 향상을 활용할 수 없습니다 . :visible요소를 선택할 때 최상의 성능을 얻으려면 먼저 순수한 CSS 선택기를 사용하여 요소를 선택한 다음을 사용하십시오 .filter(":visible").

또한 성능이 염려되면 지금 확인 하십시오 . 성능 표시 / 숨기기 (2010-05-04)를 확인하십시오. 그리고 다른 방법을 사용하여 요소를 표시하거나 숨 깁니다.