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


Answers

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

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

그리고 visible 선택자 :

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

.hide() , .show() 또는 .toggle() 함수를 사용하여 요소의 가시성을 토글 할 수 있습니다.

요소가 보이거나 숨겨져 있는지 어떻게 테스트 할 수 있습니까?




이 답 중 어느 것도 내가 이해하고있는 질문인데, 이는 내가 찾고있는 것입니다. " visibility: hidden 을 가진 항목을 어떻게 처리합니까 visibility: hidden 입니까?" . :visible:hidden 은 둘 다 문서에 따라 디스플레이를 찾고 있기 때문에이를 처리하지 못합니다. 내가 알 수있는 한 CSS 가시성을 처리 할 셀렉터가 없습니다. 다음은이를 해결 한 방법입니다 (표준 jQuery 선택기, 압축 된 구문이있을 수 있음).

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



결국, 어떤 예도 나에게 어울리지 않는다. 그래서 나는 내 자신을 썼다.

테스트 (Internet Explorer filter:alpha 지원 안 함 filter:alpha ) :

a) 문서가 숨겨져 있지 않은지 확인

b) 요소의 너비 / 높이 / 불투명도가 0인지 또는 display:none 되는지 확인합니다 display:none / visibility:hidden 인라인 스타일에서 visibility:hidden

c) 요소의 모든 픽셀 / 모서리를 테스트하는 것보다 빠르기 때문에 중심이 다른 요소 (및 모든 조상, 예 : overflow:hidden / 스크롤 / 한 요소를 초과하는 요소) 또는 화면 가장자리에 의해 숨겨지지 않는지 확인합니다.

d) 너비 / 높이 / 불투명도 또는 display:none 가없는 요소가 있는지 확인합니다 display:none / visibility : 계산 된 스타일에서 숨김 (모든 조상 중에서)

에서 테스트 됨

Android 4.4 (기본 브라우저 / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac Webkit), Internet Explorer (Internet Explorer 5-11 문서 모드 + Internet Explorer 8 가상 머신), Safari (Windows / Mac / iOS)

var is_visible = (function () {
    var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
        y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
        relative = !!((!x && !y) || !document.elementFromPoint(x, y));
        function inside(child, parent) {
            while(child){
                if (child === parent) return true;
                child = child.parentNode;
            }
        return false;
    };
    return function (elem) {
        if (
            document.hidden ||
            elem.offsetWidth==0 ||
            elem.offsetHeight==0 ||
            elem.style.visibility=='hidden' ||
            elem.style.display=='none' ||
            elem.style.opacity===0
        ) return false;
        var rect = elem.getBoundingClientRect();
        if (relative) {
            if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false;
        } else if (
            !inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) ||
            (
                rect.top + elem.offsetHeight/2 < 0 ||
                rect.left + elem.offsetWidth/2 < 0 ||
                rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) ||
                rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth)
            )
        ) return false;
        if (window.getComputedStyle || elem.currentStyle) {
            var el = elem,
                comp = null;
            while (el) {
                if (el === document) {break;} else if(!el.parentNode) return false;
                comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle;
                if (comp && (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined' && comp.opacity != 1))) return false;
                el = el.parentNode;
            }
        }
        return true;
    }
})();

사용하는 방법:

is_visible(elem) // boolean



요소가 UI에 표시되는지 여부를 측정하기 위해 가시성 / 표시 특성을 확인하기 위해 함수를 작성할 수 있습니다.

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}

일하는 바이올린




어쩌면 이렇게 할 수있을거야.

$(document).ready(function() {
   var visible = $('#tElement').is(':visible');

   if(visible) {
      alert("visible");
                    // Code
   }
   else
   {
      alert("hidden");
   }
});
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<input type="text" id="tElement" style="display:block;">Firstname</input>




보이지 않는지 확인하려면 사용합니다 ! :

if ( !$('#book').is(':visible')) {
    alert('#book is not visible')
}

또는 다음은 sam입니다. jQuery 선택기를 변수에 저장하면 여러 번 필요할 때 더 나은 성능을 얻을 수 있습니다.

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}



스타일 편집이 아닌 클래스 토글 링 사용 . .

"숨기기"요소에 지정된 클래스를 사용하는 것이 가장 쉽고 가장 효율적인 방법 중 하나입니다. Display 스타일 '없음'으로 '숨김'클래스를 전환하면 해당 스타일을 직접 편집하는 것보다 빠르게 수행됩니다. 질문에서 두 요소를 표시하거나 숨기는 것을 똑같이 설명했습니다 .

JavaScript 모범 사례 및 최적화

다음은 Google 프런트 엔드 엔지니어 인 Nicholas Zakas의 Google Tech Talk의 진정한 계몽 비디오입니다.




흔히 볼 수있는 것이 있는지 확인하는 즉시, 바로 바로 가고 다른 것으로하십시오. 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" });



ebdivstyle="display:none;" 으로 설정해야합니다 style="display:none;" . 그것은 쇼와 숨기기를 위해 작동합니다 :

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});



나는 CSS 클래스를 사용할 것이다 .hide { display: none!important; } .hide { display: none!important; } .

숨기기 / 표시를 위해 .addClass("hide")/.removeClass("hide") 호출합니다. 가시성을 확인하기 위해 .hasClass("hide") 합니다.

.toggle() 또는 .animate() 메소드를 사용하지 않으려는 경우 요소를 확인 / 숨기기 / 표시하는 간단하고 명확한 방법입니다.




또한 요소의 상태를 확인하고이를 토글하는 3 진 조건부 표현식이 있습니다.

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });



이것은 나를 위해 작동하며 show() div show()hide() 태그를 사용하여 내 div를 숨기거나 볼 수있게합니다.

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}



다음과 같이 hidden 이나 visible 속성을 사용하면됩니다.

$('element:hidden')
$('element:visible')

또는 다음과 같이 동일하게 단순화 할 수 있습니다.

$(element).is(":visible")



jQuery의 :hidden 선택기에 대해 요소를 테스트 할 때 절대 위치 지정된 요소는 자식 요소가 표시 되더라도 숨겨진 것으로 인식 될 수 있습니다 .

처음에는 반 직관적 인 것처럼 보입니다. jQuery 문서를 자세히 살펴보면 관련 정보를 얻을 수 있습니다.

요소는 여러 가지 이유로 숨겨진 것으로 간주 될 수 있습니다. [...] 폭과 높이가 명시 적으로 0으로 설정됩니다. [...]

이 사실은 요소의 상자 모델과 계산 된 스타일과 관련하여 실제로 의미가 있습니다. 너비와 높이가 명시 적 으로 0 으로 설정되지 않더라도 암시 적 으로 설정 될 수 있습니다.

다음 예를 살펴보십시오.

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false
.foo {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #ff0000;
}

.bar {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #0000ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <div class="bar"></div>
</div>

JQUERY 3.x 업데이트 :

jQuery 3을 사용하면 설명 된 동작이 변경됩니다! 너비 및 / 또는 높이가 0 인 요소를 포함하여 레이아웃 상자가있는 요소는 보이는 것으로 간주됩니다.

JSFiddle with jQuery 3.0.0-alpha1 :

http://jsfiddle.net/pM2q3/7/

같은 JS가 다음과 같은 출력을 갖습니다.

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false



if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}



Related