source

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

manycodes 2022. 12. 5. 21:25
반응형

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

요소의 가시성을 바꿀 수 있을까요?.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를 반환합니다.

실렉터를 사용할 수 있습니다.

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

그리고 셀렉터:

// 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>

에서는 위 the위 음 、 음음 、 음음 、 the the the the 。div2와 동시에 보이다:visible 않습니다. 이러한 디브가 를 찾아야 할 위의 이 될 수 . 특히 숨겨진 부모에 에러 디브(div)가 표시되는지 여부를 찾아야 할 때, 이러한 상황에서는:visible동작하지 않습니다.

이 답변들 중 어느 것도 질문이라고 이해되는 것을 다루지 않고, 제가 찾고 있던 것은 "어떻게 해야 하나요?"입니다.둘 다 아니다.: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');

어떤 것이 보이는지 여부를 확인할 때 즉시 다른 작업을 수행하게 됩니다.j쿼리 체인을 사용하면 이 작업을 쉽게 수행할 수 있습니다.

, 이해당 셀렉터에 할 경우 셀렉터를 사용할 수 .filter(":visible") ★★★★★★★★★★★★★★★★★」filter(":hidden")런음

래서 an an an an an an ...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" });

:visiblejQuery 설명서에 따라 선택기:

  • 은 CSS를 있다.display의 의 값none.
  • 에는 이이 with가 붙어 .type="hidden".
  • 폭과 높이는 명시적으로 0으로 설정됩니다.
  • 상위 요소가 숨겨져 있으므로 페이지에 표시되지 않습니다.

가 붙은 :visibility: hidden ★★★★★★★★★★★★★★★★★」opacity: 0는 여전히 레이아웃의 공간을 사용하기 때문에 보이는 것으로 간주됩니다.

경우(이 경우하지 않을 수 있습니다).display != none띄지 않는 을 하면 부모의 눈에 띄지 않게 .css("display") == 'none'속도가 빨라질 뿐만 아니라 가시성 검사도 올바르게 반환됩니다.

하려면 다음 .css("visibility") == "hidden".

추가 jQuery 노트도 고려하십시오.

★★★★★★★★★★★★★★★★★★:visible.jQuery CSS를 사용한 입니다.을 사용하다:visible DOM이 할 수 querySelectorAll()★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★:visible셀렉터를 한 후 CSS를 사용합니다..filter(":visible").

또, 퍼포먼스가 염려되는 경우는, 「Now you see me…」를 체크해 주세요(2010-05-04).또한 다른 방법을 사용하여 요소를 표시하거나 숨깁니다.

요소 가시성 및 jQuery 작동 방식

는 with를 an an an an an an an an an an an an an an로 수 .display:none,visibility:hidden ★★★★★★★★★★★★★★★★★」opacity:0이의 차이 '이것'은 다음과 같습니다.

  • display:none요소를 숨기고 공간을 차지하지 않습니다.
  • visibility:hidden요소를 숨기지만 레이아웃에서 공간을 차지합니다.

  • opacity:0를 "으로합니다. 투명하게 수 입니다. "visibility: hidden"은 "visibility: hidden"으로 지정합니다. 유일한 차이점은 불투명도가 요소를 부분적으로 투명하게 만들 수 있다는 것입니다.

    if ($('.target').is(':hidden')) {
  $('.target').show();
} else {
  $('.target').hide();
}
if ($('.target').is(':visible')) {
  $('.target').hide();
} else {
  $('.target').show();
}

if ($('.target-visibility').css('visibility') == 'hidden') {
  $('.target-visibility').css({
    visibility: "visible",
    display: ""
  });
} else {
  $('.target-visibility').css({
    visibility: "hidden",
    display: ""
  });
}

if ($('.target-visibility').css('opacity') == "0") {
  $('.target-visibility').css({
    opacity: "1",
    display: ""
  });
} else {
  $('.target-visibility').css({
    opacity: "0",
    display: ""
  });
}

    유용한 jQuery 전환 메서드: 

    $('.click').click(function() {
  $('.target').toggle();
});

$('.click').click(function() {
  $('.target').slideToggle();
});

$('.click').click(function() {
  $('.target').fadeToggle();
});

이거면 , 는 지금 이 말을 요.show() ★★★★★★★★★★★★★★★★★」hide()숨김 숨김/숨김: div/숨김:

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

플레인 JavaScript를 사용하여 이 작업을 수행할 수도 있습니다.

function isRendered(domObj) {
    if ((domObj.nodeType != 1) || (domObj == document.body)) {
        return true;
    }
    if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
        return isRendered(domObj.parentNode);
    } else if (window.getComputedStyle) {
        var cs = document.defaultView.getComputedStyle(domObj, null);
        if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
            return isRendered(domObj.parentNode);
        }
    }
    return false;
}

주의:

  1. 어디에서나 기능

  2. 중첩된 요소에 대해 작동합니다.

  3. CSS 및 인라인 스타일에 대응

  4. 프레임워크 불필요

는 CSS CSS를 합니다..hide { display: none!important; }

는 '/어울리다'라고 합니다..addClass("hide")/.removeClass("hide")에는 · 야야 · · · · · · ·를 사용합니다..hasClass("hide").

이 기능은 요소를 확인/숨기기/표시하기 위한 간단하고 명확한 방법입니다..toggle() ★★★★★★★★★★★★★★★★★」.animate()★★★★★★★★★★★★★★★★★★.

데모 링크

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" width="300"/>

출처(내 블로그):

블로거 플러그 앤 플레이 - jQuery 도구 및 위젯:jQuery를 사용하여 요소가 숨겨지거나 표시되는지 확인하는 방법

하실 수 .hidden ★★★★★★★★★★★★★★★★★」visible속성:

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

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

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

ebdiv로 설정해야 style="display:none;"hide에 할 수 . 숨기다

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

고려해야 할 또 다른 답변은 요소를 숨기는 경우 jQuery를 사용하는 것입니다.그러나 실제로 요소를 숨기는 대신 요소 전체를 삭제하고 HTML 콘텐츠와 태그 자체를 jQuery 변수로 복사하여 화면에 이러한 태그가 있는지 테스트하는 것입니다.일반적인 방법으로 테스트합니다.if (!$('#thetagname').length).

를 에 대해 :hiddenjQuery에서 셀렉터는 절대 위치 요소가 숨김으로 인식될 수 있지만 하위 요소는 볼 수 있는 것으로 간주해야 합니다.

이는 애당초 직관에 반하는 것처럼 보이지만 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 폭 및/또는 높이를 포함한 레이아웃 상자가 있는 경우 표시되는 것으로 간주됩니다.

jQuery 3.0.0-alpha1을 사용하는 JSFidle:

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

그러면 동일한 JavaScript 코드가 다음과 같이 출력됩니다.

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

expect($("#message_div").css("display")).toBe("none");


$(document).ready(function() {
  if ($("#checkme:hidden").length) {
    console.log('Hidden');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
  <span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
  <br>Product: Salmon Atlantic
  <br>Specie: Salmo salar
  <br>Form: Steaks
</div>

하기 위해 '안 보이는지'를 사용합니다.!:

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

또는 jQuery 셀렉터를 변수에 저장하여 여러 번 필요할 때 성능을 향상시킵니다.

var $book = $('#book')

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

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

요소를 숨기기 위해 지정된 클래스를 사용하는 것은 쉽고 가장 효율적인 방법 중 하나입니다."hidden"과 "hidden"의Display'없음' 스타일은 해당 스타일을 직접 편집하는 것보다 더 빨리 수행됩니다.스택 오버플로우 질문에서 이 중 몇 가지를 자세히 설명했습니다.두 요소를 같은 div에 표시/숨김으로 전환합니다.

JavaScript 베스트 프랙티스 및 최적화

다음은 구글 프런트 엔드 엔지니어 니콜라스 자카스의 구글 테크 토크에 대한 진정으로 계몽적인 비디오입니다.

결국, 어떤 예도 나에게 맞지 않기 때문에, 나는 내 것을 썼다.

테스트(Internet Explorer 지원 없음)filter:alpha

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

의 폭인지 또는 b) ㄴ/ㄴ/ㄴ/는 0인지 한다.display:nonevisibility:hidden

픽셀에) 요소, 예: c)에 합니다. §:overflow:hidden / 중 화면 / 화면 모서리 / 화면 모서리

width / / 또는 d) //높/불/불 0 인인 인 인 인 인 인 an 인 an 인 인 인 인 인 인 an d an an an zero an an an an display:none 조상 중에 숨김/ ": " " " " " " " " " " " " " " " " " " " " " " "

테스트 완료일

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/OS)를 지원합니다.

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

애드 블로커에 대한 가시적인 체크를 사용하는 예는 다음과 같습니다.

$(document).ready(function(){
  if(!$("#ablockercheck").is(":visible"))
    $("#ablockermsg").text("Please disable adblocker.").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad-placement" id="ablockercheck"></div>
<div id="ablockermsg" style="display: none"></div>

"ablocker check"는 애드블로커가 차단하는 ID입니다.따라서 애드블로커가 켜져 있는지 여부를 확인할 수 있습니다.

둘 다 확인해야...디스플레이 및 가시성:

if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

★★★를 $(this).is(":visible")는 두 합니다.jQuery query는는 query query query query query query query query query query query query 。

$(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 (this.hidden === false) {
    // Your code
}

각 기능에 이 코드를 사용했습니다. 이외의 경우는, 「」를 사용할 수 .is(':visible')요소의 가시성을 확인하기 위한 것입니다.

★★★★★★★★★★★★★★★★★★Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout(jQuery:visible Selector에서 설명한 바와 같이) 다음과 같이 요소가 실제로 표시되는지 여부를 확인할 수 있습니다.

function isElementReallyHidden (el) {
    return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}

var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
    if (isElementReallyHidden(this)) {
        booElementReallyShowed = false;
    }
});

하지만 만약 원소의 CSS가 다음과 같다면?

.element{
    position: absolute;left:-9999;    
}

따라서 스택 오버플로우 질문에 대한 이 답변은 요소가 화면 밖에 있는지 확인하는 방법도 고려해야 합니다.

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

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

현용 바이올린

또한 요소의 상태를 확인하고 전환하기 위한 3원 조건식을 다음에 나타냅니다.

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

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

언급URL : https://stackoverflow.com/questions/178325/how-do-i-check-if-an-element-is-hidden-in-jquery

반응형

'source' 카테고리의 다른 글

Python에서 같은 줄에 여러 개의 인쇄물  (0) 2022.12.05
JavaScript에는 스트링빌더 클래스가 내장되어 있습니까?  (0) 2022.12.05
PHP를 사용하여 여러 MariaDB 쿼리를 실행할 수 없습니다.  (0) 2022.12.05
설명: MariaDB에서 MySQL로 이행한 후 "DEPEND SUBQUERY"가 표시되며 매우 느림  (0) 2022.12.05
PHP를 통한 SSH 명령 실행 방법  (0) 2022.11.26

'source'의 다른글

  • 현재글요소가 jQuery에 숨겨져 있는지 확인하려면 어떻게 해야 합니까?

관련글

댓글

티스토리툴바