Wie prüfe ich, ob ein Element in jQuery ausgeblendet ist?

Question

Ist es möglich, die Sichtbarkeit eines Elements umzuschalten, indem man die Funktionen .hide() , .show() ou .toggle() ?

Wie würden Sie testen, ob ein Element visible ou hidden ?

Answer 1

Es gibt mehrere Möglichkeiten zu prüfen, ob ein Element in jQuery sichtbar oder verborgen ist.

Demo-HTML als Referenzbeispiel

<div id="content">Content</div>
<div id="content2" style="display:none">Content2</div>

Sichtbarkeitsfilterauswahl verwenden $('element:hidden') ou $('element:visible')

• $('element:hidden') : Markiert alle Elemente, die ausgeblendet sind.

  Example:
     $('#content2:hidden').show();

• $('element:visible') : Wählt alle Elemente aus, die sichtbar sind.

  Example:
     $('#content:visible').css('color', '#EEE');

Lesen Sie mehr unter http://api.jquery.com/category/selectors/visibility-filter-selectors/

Utilisez is() Filtern

    Example:
       $('#content').is(":visible").css('color', '#EEE');

    Or checking condition
    if ($('#content').is(":visible")) {
         // Perform action
    }

Lesen Sie mehr unter http://api.jquery.com/is/

Answer 2

Dies ist der Weg jQuery löst dieses Problem intern:

jQuery.expr.pseudos.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

Wenn Sie jQuery nicht verwenden, können Sie diesen Code einfach nutzen und ihn in Ihre eigene Funktion umwandeln:

function isVisible(elem) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

Welche isVisible wird zurückgegeben true so lange das Element sichtbar ist.

Answer 3

Sie können dies verwenden:

$(element).is(':visible');

Beispiel-Code

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

    $("#visiblity").click(function()
    {
       if( $('#content').is(':visible') )
       {
          alert("visible"); // Put your code for visibility
       }
       else
       {
          alert("hidden");
       }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<p id="content">This is a Content</p>

<button id="toggle">Toggle Content Visibility</button>
<button id="visibility">Check Visibility</button>

Answer 4

Ich möchte nur klarstellen, dass in jQuery,

Elemente können aus verschiedenen Gründen als verborgen betrachtet werden:

• Sie haben einen CSS-Anzeigewert von none.
• Es handelt sich um Formularelemente mit type="hidden".
• Ihre Breite und Höhe werden ausdrücklich auf 0 gesetzt.
• Ein Vorgängerelement wird ausgeblendet, d. h. das Element wird auf der Seite nicht angezeigt.

Elemente mit Sichtbarkeit: ausgeblendet oder Deckkraft: 0 gelten als sichtbar, da sie noch Platz im Layout beanspruchen. Bei Animationen, die ein Element ausblenden, gilt das Element bis zum Ende der Animation als sichtbar.

Quelle: :hidden Selektor | jQuery API Dokumentation

if($('.element').is(':hidden')) {
  // Do something
}

Answer 5

1 - jQuery-Lösung

Methoden zur Bestimmung, ob ein Element in jQuery sichtbar ist

<script>
if ($("#myelement").is(":visible")){alert ("#myelement is visible");}
if ($("#myelement").is(":hidden")){alert ("#myelement is hidden"); }
</script>

Schleife über alle sichtbar div Kinder des Elements mit der id 'myelement':

$("#myelement div:visible").each( function() {
 //Do something
});

Ein Blick auf den Quellcode von jQuery

So implementiert jQuery diese Funktion:

jQuery.expr.filters.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

2 - Prüfen, ob ein Element außerhalb des Bildschirms liegt - CSS

Mit Element.getBoundingClientRect() können Sie leicht feststellen, ob sich Ihr Element innerhalb der Grenzen Ihres Ansichtsfensters befindet (d.h. onscreen oder offscreen):

jQuery.expr.filters.offscreen = function(el) {
  var rect = el.getBoundingClientRect();
  return (
           (rect.x + rect.width) < 0 
             || (rect.y + rect.height) < 0
             || (rect.x > window.innerWidth || rect.y > window.innerHeight)
         );
};

Diese können Sie dann auf verschiedene Weise verwenden:

// Returns all elements that are offscreen
$(':offscreen');

// Boolean returned if element is offscreen
$('div').is(':offscreen');

Wenn Sie Angular verwenden, überprüfen Sie das: Verwenden Sie keine versteckten Attribute mit Angular