그것은 요소의 표시를 전환하는 기능을 사용하는 것이 가능하다 .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 참고 사항도 고려 하십시오 .
:visible
jQuery 확장이며 CSS 스펙의 일부가 아니기 때문에 사용하는 쿼리:visible
는 기본 DOMquerySelectorAll()
메소드가 제공하는 성능 향상을 활용할 수 없습니다 .:visible
요소를 선택할 때 최상의 성능을 얻으려면 먼저 순수한 CSS 선택기를 사용하여 요소를 선택한 다음을 사용하십시오.filter(":visible")
.
또한 성능이 염려되면 지금 확인 하십시오 . 성능 표시 / 숨기기 (2010-05-04)를 확인하십시오. 그리고 다른 방법을 사용하여 요소를 표시하거나 숨 깁니다.