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





15 Answers

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

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

그리고 visible 선택자 :

// Matches all elements that are visible
$('element:visible')
제이쿼리 visibility style

.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
    }
});



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



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

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



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

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

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




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

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

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

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



$('#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="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />

출처:

Blogger Plug n Play - jQuery 도구 및 위젯 : jQuery를 사용하여 요소가 숨겨 지거나 표시되는지 확인하는 방법

jsFiddle :

JSFiddle - ipsjolly - k4WWj




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



예:

$(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>




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

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

JavaScript 모범 사례 및 최적화

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




adblocker에 대한 눈에 보이는 검사를 사용하는 예가 활성화되었습니다.

$(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>

"ablockercheck"는 adblocker가 차단하는 ID입니다. 그래서 그것이 눈에 보이면 당신은 adblocker가 켜져 있는지 감지 할 수 있습니다.




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

$(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($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}



부울 값을 확인하여 가시성을 확인하기 만하면됩니다.

if (this.hidden === false) {
    // Your code
}

각 기능에이 코드를 사용했습니다. 그렇지 않으면 요소 is(':visible') 를 사용하여 요소의 가시성을 검사 할 수 있습니다.




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

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





Related