Jak sprawdzić, czy element jest ukryty w jQuery?

Czy to możliwe, aby przełączyć widoczność elementu, używając funkcji .hide(), .show()lub .toggle()?

Jak sprawdziłbyś, czy elementem jest visiblelub hidden?

Ponieważ pytanie dotyczy pojedynczego elementu, ten kod może być bardziej odpowiedni:

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

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

Jest to to samo, co sugestia twernta , ale dotyczy tylko jednego elementu; i odpowiada algorytmowi zalecanemu w FAQ jQuery .

Używamy jQuery's is (), aby sprawdzić wybrany element za pomocą innego elementu, selektora lub dowolnego obiektu jQuery. Ta metoda przechodzi wzdłuż elementów DOM, aby znaleźć dopasowanie, które spełnia przekazany parametr. Zwróci true, jeśli istnieje dopasowanie, w przeciwnym razie zwróci false.

Możesz użyć hiddenselektora:

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

I visibleselektor:

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

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

Powyższa metoda nie uwzględnia widoczności elementu nadrzędnego. Aby wziąć pod uwagę również rodzica, należy użyć .is(":hidden")lub .is(":visible").

Na przykład,

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

Powyższa metoda będzie uważana za div2widoczną, podczas gdy :visiblenie będzie. Ale powyższe może być przydatne w wielu przypadkach, szczególnie gdy musisz sprawdzić, czy w ukrytym rodzicu są widoczne div div błędów, ponieważ w takich warunkach :visiblenie będą działać.

Żadna z tych odpowiedzi nie dotyczy pytania, które rozumiem jako tego, czego szukałem: „Jak radzić sobie z przedmiotami, które mają visibility: hidden?” . Ani to, :visibleani :hiddennie poradzi sobie z tym, ponieważ oboje szukają wyświetlania według dokumentacji. O ile mogłem ustalić, nie ma selektora do obsługi widoczności CSS. Oto jak to rozwiązałem (standardowe selektory jQuery, może być bardziej skondensowana składnia):

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

Od Jak ustalić stan przełączanego elementu?

Możesz określić, czy element jest zwinięty, czy nie, używając selektorów :visiblei :hidden.

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

Jeśli po prostu działasz na elemencie w oparciu o jego widoczność, możesz po prostu uwzględnić :visiblelub :hiddenw wyrażeniu selektora. Na przykład:

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

Często sprawdzając, czy coś jest widoczne, czy nie, natychmiast pójdziesz do przodu i zrobisz z tym coś innego. Łańcuch jQuery ułatwia to.

Więc jeśli masz selektor i chcesz wykonać na nim jakąś akcję, tylko jeśli jest widoczny lub ukryty, możesz użyć filter(":visible")lub filter(":hidden")po nim połączyć go łańcuchem z akcją, którą chcesz podjąć.

Zamiast ifoświadczenia, tak:

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

Lub bardziej wydajny, ale jeszcze brzydszy:

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

Możesz to wszystko zrobić w jednym wierszu:

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

:visibleSelektor według dokumentacji jQuery :

• Mają displaywartość CSS wynoszącą none.
• Są elementami formularza z type="hidden".
• Ich szerokość i wysokość są jawnie ustawione na 0.
• Element nadrzędny jest ukryty, więc element nie jest wyświetlany na stronie.

Elementy z visibility: hiddenlub opacity: 0są uważane za widoczne, ponieważ nadal zajmują miejsce w układzie.

Jest to przydatne w niektórych przypadkach i bezużyteczne w innych, ponieważ jeśli chcesz sprawdzić, czy element jest widoczny ( display != none), ignorując widoczność rodziców, przekonasz się, że działanie .css("display") == 'none'jest nie tylko szybsze, ale również poprawnie zwróci kontrolę widoczności.

Jeśli chcesz sprawdzić widoczność zamiast wyświetlacza, należy użyć: .css("visibility") == "hidden".

Weź również pod uwagę dodatkowe uwagi jQuery :

Ponieważ :visiblejest to rozszerzenie jQuery, a nie część specyfikacji CSS, używane zapytania :visiblenie mogą skorzystać ze zwiększenia wydajności zapewnianego przez natywną querySelectorAll()metodę DOM . Aby osiągnąć najlepszą wydajność podczas :visiblewybierania elementów, najpierw wybierz elementy za pomocą czystego selektora CSS, a następnie użyj .filter(":visible").

Ponadto, jeśli martwisz się wydajnością, powinieneś sprawdzić Teraz widzisz mnie… pokaż / ukryj wydajność (2010-05-04). I użyj innych metod do pokazywania i ukrywania elementów.

Działa to dla mnie, a ja używam show()i hide()aby ukryć / widoczność mojego diva:

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

Jak działa widoczność elementu i jQuery ;

Element może być ukryte z display:none, visibility:hiddenlub opacity:0. Różnica między tymi metodami:

• display:none ukrywa element i nie zajmuje miejsca;
• visibility:hidden ukrywa element, ale nadal zajmuje miejsce w układzie;

• opacity:0ukrywa element jako „widoczność: ukryty” i nadal zajmuje miejsce w układzie; jedyną różnicą jest to, że nieprzezroczystość pozwala uczynić element częściowo przezroczystym;

  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: ""
    });
  }

  Przydatne metody przełączania jQuery:

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

Możesz to również zrobić za pomocą zwykłego 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;
}

Uwagi:

1. Działa wszędzie

2. Działa dla elementów zagnieżdżonych

3. Działa dla CSS i stylów wbudowanych

4. Nie wymaga ram

Użyłbym klasy CSS .hide { display: none!important; }.

Dzwonię do ukrywania / pokazywania .addClass("hide")/.removeClass("hide"). Używam do sprawdzania widoczności .hasClass("hide").

Jest to prosty i jasny sposób sprawdzania / ukrywania / pokazywania elementów, jeśli nie planujesz używać .toggle()ani .animate()metod.

Link demonstracyjny

$('#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"/>

Źródło:

Blogger Plug n Play - Narzędzia i widżety jQuery: jak sprawdzić, czy element jest ukryty lub widoczny za pomocą jQuery

Można po prostu użyć atrybutu hiddenlub visible, na przykład:

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

Czy można uprościć samo z Is następująco.

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

ebdivpowinien być ustawiony na style="display:none;". Działa zarówno w przypadku pokazu, jak i ukrywania:

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

Inną odpowiedzią, którą należy wziąć pod uwagę, jest to, że jeśli ukrywasz element, powinieneś użyć jQuery , ale zamiast go ukrywać, usuwasz cały element, ale kopiujesz jego zawartość HTML i sam tag do zmiennej jQuery, a następnie wszystko, co musisz zrobić, to sprawdzić, czy na ekranie jest taki tag, używając normalnego if (!$('#thetagname').length).

Podczas testowania elementu względem :hiddenselektora w jQuery należy wziąć pod uwagę, że element pozycjonowany absolutnie może zostać rozpoznany jako ukryty, chociaż jego elementy potomne są widoczne .

Wydaje się to przede wszystkim nieco sprzeczne z intuicją - choć dokładne przyjrzenie się dokumentacji jQuery daje istotne informacje:

Elementy można uznać za ukryte z kilku powodów: [...] Ich szerokość i wysokość są jawnie ustawione na 0. [...]

Ma to więc sens w odniesieniu do modelu pudełkowego i obliczonego stylu elementu. Nawet jeśli szerokość i wysokość nie są jawnie ustawione na 0, mogą być ustawione domyślnie .

Spójrz na następujący przykład:

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>

Aktualizacja dla jQuery 3.x:

W jQuery 3 opisane zachowanie się zmieni! Elementy będą uważane za widoczne, jeśli mają jakieś pola układu, w tym te o zerowej szerokości i / lub wysokości.

JSFiddle z jQuery 3.0.0-alpha1:

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

Ten sam kod JavaScript będzie miał następujące dane wyjściowe:

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

Może to działać:

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

Przykład:

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

Aby sprawdzić, czy nie jest widoczny, używam !:

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

Lub poniżej znajduje się również sam, zapisując selektor jQuery w zmiennej, aby uzyskać lepszą wydajność, gdy jest potrzebna wiele razy:

var $book = $('#book')

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

Używaj przełączania klas, a nie edycji stylu. . .

Korzystanie z klas przeznaczonych do „ukrywania” elementów jest łatwe, a także jedną z najbardziej wydajnych metod. Przełączanie klasy „ukrytej” ze Displaystylem „none” będzie działać szybciej niż bezpośrednia edycja tego stylu. Wyjaśniłem niektóre z tego dość dokładnie w pytaniu Przepełnienie stosu Przekształcanie dwóch elementów widocznych / ukrytych w tym samym div .

JavaScript Najlepsze praktyki i optymalizacja

Oto naprawdę pouczające wideo z Google Tech Talk przez inżyniera Google, Nicholasa Zakasa:

• Przyspiesz swój Javascript (YouTube)

Przykład użycia widocznego czeku dla adblockera jest aktywowany:

$(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” to identyfikator, który blokuje adblocker. Więc sprawdzając, czy jest widoczny, możesz wykryć, czy adblocker jest włączony.

W końcu żaden z tych przykładów mi nie pasuje, więc napisałem własny.

Testy (brak obsługi Internet Explorera)filter:alpha ):

a) Sprawdź, czy dokument nie jest ukryty

b) Sprawdź, czy element ma zerową szerokość / wysokość / krycie lub display:none/visibility:hidden w stylach wbudowanych

c) Sprawdź, czy środek (także dlatego, że jest szybszy niż testowanie każdego piksela / rogu) elementu nie jest ukryty przez inny element (i wszystkich przodków, na przykład: overflow:hidden / scroll / jeden element nad innym) lub krawędzie ekranu

d) Sprawdź, czy element ma zerową szerokość / wysokość / krycie lub display:none/ widoczność: ukryty w stylach obliczeniowych (wśród wszystkich przodków)

Testowane na

Android 4.4 (natywna przeglądarka / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (tryby dokumentów 5-11 Internet Explorer + Internet Explorer 8 na maszyna wirtualna) i 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;
    }
})();

Jak używać:

is_visible(elem) // boolean

Musisz sprawdzić zarówno ... Wyświetlanie, jak i widoczność:

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

Jeśli sprawdzimy $(this).is(":visible"), jQuery automatycznie sprawdza obie rzeczy.

Może możesz zrobić coś takiego

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

Wystarczy sprawdzić widoczność, sprawdzając wartość logiczną, np .:

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

Użyłem tego kodu dla każdej funkcji. W przeciwnym razie możesz użyć is(':visible')do sprawdzenia widoczności elementu.

Ponieważ Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout(jak opisano w jQuery: visible Selector ) - możemy sprawdzić, czy element jest naprawdę widoczny w ten sposób:

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

Ale co, jeśli CSS elementu wygląda następująco?

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

Tak więc należy również wziąć pod uwagę tę odpowiedź na pytanie dotyczące przepełnienia stosu. Jak sprawdzić, czy element jest poza ekranem .

Można utworzyć funkcję w celu sprawdzenia widoczności / atrybutów wyświetlania w celu oceny, czy element jest wyświetlany w interfejsie użytkownika, czy nie.

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

Working Fiddle

Oto także trójkowe wyrażenie warunkowe, które sprawdza stan elementu, a następnie przełącza go:

$('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());
}