Wie kann ich überprüfen, ob ein Element in jQuery versteckt ist?

Question

Es ist möglich, die Sichtbarkeit eines Elements zu wechseln, können die Funktionen .hide(), .show() oder .toggle() verwenden.

Wie würden Sie testen, ob ein Element sichtbar oder versteckt ist?

Answer 1

Da die Frage auf ein einzelnes Element bezieht, könnte dieser Code besser geeignet:

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

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

Wie bei twernt Vorschlag < a />, aber auf ein einzelnes Element angelegt wird; und entspricht den Algorithmus in der jQuery FAQ empfohlen

Answer 2

Sie können über den hidden Selektor:

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

Und die visible Selektor:

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

Answer 3

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

Vor Methode nicht die Sichtbarkeit der Eltern berücksichtigen. Um die Eltern als auch zu betrachten, sollten Sie .is(":hidden") oder .is(":visible") verwenden.

Beispiel:

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

  

Das obige Verfahren wird prüfen div2 sichtbar, während :visible nicht. Aber die oben könnte in vielen Fällen sinnvoll sein, vor allem, wenn Sie finden müssen, ob es irgendwelche Fehler divs sichtbar in den verborgen Eltern ist, weil unter solchen Bedingungen :visible wird nicht funktionieren.

Answer 4

Keine dieser Antworten sprechen, was ich verstehe die Frage sein, das ist das, was ich suchte, „Wie kann ich Gegenstände behandeln, die visibility: hidden haben?“ . Weder :visible noch :hidden werden diese handhaben, da sie beide sind für die Anzeige gemäß der Dokumentation suchen. Soweit ich feststellen konnte, gibt es keinen Selektor CSS Sichtbarkeit zu handhaben. Hier ist, wie ich es gelöst (Standard jQuery Selektoren, kann es eine verkürzte Syntax sein):

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

Answer 5

Von Wie kann ich den Zustand eines getoggelt Element bestimmen?

---

Sie können bestimmen, ob ein Element zusammengebrochen ist oder nicht, indem der :visible und :hidden Selektoren.

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

Wenn Sie sich einfach auf ein Element wirkt, auf der Grundlage seiner Sicht, können Sie einfach schließen :visible oder :hidden in der Auswahl Ausdruck. Zum Beispiel:

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

Answer 6

Oft, wenn geprüft wird, ob etwas sichtbar ist oder nicht, werden Sie nach rechts weiter sofort gehen und mit ihm etwas anderes zu tun. jQuery Verkettungs macht dies einfach.

Wenn Sie also einen Wähler haben, und Sie wollen es, eine Aktion auszuführen, wenn nur sichtbar oder versteckt ist, Sie filter(":visible") oder filter(":hidden") gefolgt von Verkettungs es mit der Aktion, die Sie wollen, können nehmen.

So anstelle einer if Anweisung, wie folgt aus:

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

oder effizienter zu gestalten, aber auch hässlicher:

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

Sie können es alle in einer Zeile ein:

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

Answer 7

Der :visible Selektor nach der jQuery-Dokumentation :

  

  
• Sie haben einen CSS display Wert von none.
  
• Sie sind Formularelemente mit type="hidden".
  
• Ihre Breite und Höhe sind explizit auf 0 gesetzt.
  
• Ein Vorfahre Element ist verborgen, so dass das Element nicht auf der Seite angezeigt.
  

     

Elemente mit visibility: hidden oder opacity: 0 gelten als sichtbar sein, da sie noch Platz im Layout verbrauchen.

Dies ist in einigen Fällen und nutzlos in anderen nützlich ist, denn wenn Sie überprüfen möchten, ob das Element sichtbar ist (display != none), die Eltern Sichtbarkeit zu ignorieren, werden Sie feststellen, dass .css("display") == 'none' tun, ist nicht nur schneller, sondern auch die Rückkehr Sichtbarkeit Prüfung korrekt.

Wenn Sie die Sichtbarkeit statt Anzeige überprüfen möchten, sollten Sie verwenden:. .css("visibility") == "hidden"

auch berücksichtigen die zusätzliche jQuery Notizen :

  

Da :visible eine Erweiterung jQuery ist und nicht Teil der CSS-Spezifikation, Abfragen :visible verwenden, können nicht die Vorteile der Leistungssteigerung nehmen durch die nativen DOM querySelectorAll() Verfahren zur Verfügung gestellt. Um die beste Leistung zu erzielen, wenn :visible unter Verwendung von Elementen zu wählen, wählen Sie zunächst die Elemente einen reinen CSS-Selektor verwenden, dann .filter(":visible") verwenden.

Auch wenn Sie besorgt über die Leistung sind, sollten Sie überprüfen Jetzt sehen Sie mich ... anzeigen / ausblenden Leistung (2010-05-04). Und andere Methoden verwenden, um Elemente ein- und ausgeblendet.

Answer 8

Dies funktioniert für mich, und ich bin mit show() und hide() meine div versteckt / sichtbar zu machen:

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

Answer 9

Wie Element Sichtbarkeit und jQuery funktioniert ,

Ein Element könnte mit display:none, visibility:hidden oder opacity:0 versteckt werden. Der Unterschied zwischen diesen Methoden:

• display:none blendet das Element, und es auf sich nimmt keinen Platz;
• visibility:hidden versteckt das Element, aber es dauert noch Platz im Layout auf;

• opacity:0 blendet das Element als "visibility: hidden", und es dauert noch Platz im Layout auf; Der einzige Unterschied besteht darin, dass Opazität läßt man ein Element teilweise transparent machen;

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

  Nützliche jQuery Toggle-Methoden:

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

Answer 10

Ich würde CSS-Klasse .hide { display: none!important; } verwenden.

Für Ein- / Ausblenden, nenne ich .addClass("hide")/.removeClass("hide"). Für die Sichtbarkeit Überprüfung verwende ich .hasClass("hide").

Es ist eine einfache und übersichtliche Art und Weise / zu überprüfen hide / show Elemente, wenn Sie nicht planen, .toggle() oder .animate() Methoden zu verwenden.

Answer 11

Sie können dies auch mit Normalpapier JavaScript tun:

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

Weitere Informationen:

1. Funktioniert überall

2. Werke für verschachtelte Elemente

3. Werke für CSS und Inline-Styles

4. Es wird kein Rahmen erforderlich

Answer 12

Man kann einfach das hidden oder visible Attribut verwenden, wie:

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

Sie können auch die gleiche Vereinfachung mit ist wie folgt.

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

Answer 13

Demo Link-

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

Quelle:

Blogger Plug & Play - jQuery-tools und Widgets: Wie zu sehen, ob Element versteckt oder sichtbar ist Mit jQuery

Answer 14

ebdiv sollte style="display:none;" eingestellt werden. Es funktioniert sowohl für ein- und ausgeblendet:

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

Answer 15

Eine andere Antwort, die Sie in Betracht setzen sollte, ist, wenn Sie ein Element verstecken, sollten Sie jQuery , aber anstatt es tatsächlich versteckt, können Sie das gesamte Element entfernen, aber Sie kopieren ihre HTML Inhalt und der Tag selbst in eine jQuery Variable, und dann alles, was Sie tun müssen, ist Test, wenn es so ein Tag auf dem Bildschirm, die normalen if (!$('#thetagname').length) verwendet wird.

Answer 16

Wenn ein Element Prüfung gegen :hidden Wähler in jQuery es in Betracht gezogen werden sollte, dass ein absolutes positioniertes Element erkannt werden kann als versteckte obwohl ihr Kind Elemente sind sichtbar .

Das scheint etwas kontraintuitiv in erster Linie - wenn auch in der jQuery-Dokumentation einen genaueren Blick mit relevanten Informationen gibt:

  

Die Elemente können aus mehreren Gründen versteckt in Betracht gezogen werden: [...] Ihre Breite und Höhe sind explizit auf 0 gesetzt [...]

Also das macht tatsächlich Sinn in Bezug auf das Box-Modell und den berechneten Stil für das Element. Selbst wenn Breite und Höhe nicht festgelegt werden explizit auf 0 sie eingestellt werden kann implizit .

Haben Sie einen Blick auf das folgende Beispiel:

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>

---

UPDATE FÜR JQUERY 3.x:

Mit jQuery 3 das beschriebene Verhalten ändern wird! Elemente werden als sichtbar, wenn sie irgendwelche Layoutbox haben, einschließlich der Null Breite und / oder Höhe.

JSFiddle mit jQuery 3.0.0-alpha1:

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

Die gleiche JS wird dann diese Ausgabe hat:

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

Answer 17

Das kann funktionieren:

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

Answer 18

Beispiel:

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

Answer 19

Um zu überprüfen, ob sie nicht sichtbar ist verwende ich !:

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

oder die folgend ist auch der sam, den jQuery-Selektor in einem variablen Spar einem bessere Leistung zu haben, wenn Sie es mehrmals benötigen:

var $book = $('#book')

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

Answer 20

Gebrauchsklasse Makel, nicht Stil Bearbeitung. . .

Klassen bezeichnet Verwendung für „Verstecken“ Elemente ist einfach und auch eine der effizientesten Methoden. eine Klasse ‚versteckt‘ mit einem Display Stil von ‚none‘ wird schneller ausgeführt Makel als direkt diesen Stil bearbeiten. Ich erklärte, einige dieser ziemlich gründlich in Stack-Überlauf Frage Drehen zwei Elemente sichtbar / versteckt in dem gleichen div .

---

JavaScript Best Practices und Optimierung

Hier ist ein wirklich aufschlussreich Video von einem Google Tech Talk von Google-Front-End-Ingenieure Nicholas Zakas:

• Geschwindigkeit Ihres Javascript (YouTube)

Answer 21

Beispiel für die Verwendung der sichtbar prüfen adblocker aktiviert ist:

$(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" ist eine ID, die Blöcke adblocker. So überprüft es, ob es sichtbar ist Sie in der Lage sind zu erkennen, ob adblocker eingeschaltet ist.

Answer 22

Nachdem alle, keine Beispiele passt zu mir, so schrieb ich meine eigenen.

Tests (keine Unterstützung von Internet Explorer filter:alpha):

a) Überprüfen Sie, ob das Dokument nicht verborgen ist

b) Überprüfen Sie, ob ein Element Null Breite / Höhe / Opazität oder display:none / visibility:hidden in Inline-Stile

c) Überprüfen Sie, ob das Zentrum (auch, weil es schneller als jedes Pixel / Ecke Prüfung) des Elements wird durch ein anderes Element nicht versteckt (und alle Vorfahren, Beispiel: overflow:hidden / Scroll / ein Element über enother) oder die Bildschirmränder

d) Prüfen, ob ein Element hat null Breite / Höhe / oder Opazität display:none / Sichtbarkeit: versteckt in Arten berechnet (unter allen Vorfahren)

Getestet auf

Android 4.4 (Mutter Browser / Chrom / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac Webkit), Internet Explorer (Internet Explorer 5-11 Dokument Modi + Internet Explorer 8 auf einer virtuellen Maschine), 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;
    }
})();

Wie verwenden:

is_visible(elem) // boolean

Answer 23

Sie müssen beide ... Anzeige überprüfen sowie Sichtbarkeit:

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

Wenn wir prüfen $(this).is(":visible"), jQuery Kontrollen sowohl für die Dinge automatisch.

Answer 24

Vielleicht können Sie etwas tun

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

Answer 25

Sie einfach überprüfen Sichtbarkeit durch einen Booleschen Wert überprüft, wie:

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

habe ich diesen Code für jede Funktion. Ansonsten können Sie is(':visible') zur Überprüfung der Sichtbarkeit eines Elements verwenden.

Answer 26

Da Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (wie jQuery beschrieben: sichtbar Selector ) - wir können überprüfen, ob Element wirklich sichtbar auf diese Weise:

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

Answer 27

Was aber, wenn das CSS des Elements ist wie folgt aus?

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

So Wie kann man überprüfen, ob ein Element außerhalb des Bildschirms ist sollten ebenfalls berücksichtigt werden.

Answer 28

Auch hier ist ein ternären bedingten Ausdruck, den Zustand des Elements zu prüfen und dann zu wechseln:

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

Answer 29

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

Answer 30

Eine Funktion kann geschaffen werden, um für die Sichtbarkeit / Anzeigeattribute, um zu überprüfen, zu beurteilen, ob das Element in der Benutzeroberfläche oder nicht dargestellt ist.

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

Arbeits Fiddle