Wie überprüft man, ob ein Element in jQuery versteckt ist

Jedes Objekt im DOM kann versteckt werden, indem seine CSS-Eigenschaft von display als none zugewiesen wird.

Methode zur Überprüfung, ob ein Element in jQuery versteckt ist

Zuerst erstellen wir ein Überschriftenelement <h1> und wenden die Inline-CSS-Eigenschaft an, um es zu verbergen.

<h1 style="display:none;">Your text here</h1>

In jQuery gibt es zwei Sichtbarkeitsfilter - :hidden und :visible Selektoren. Sie legen fest, ob das Element versteckt oder sichtbar ist. Es kann leicht mit der folgenden Methode überprüft werden.

<script>
$(document).ready(function(){
//checks if document is ready
 if($("h1").is(":hidden")){
  alert("The heading is hidden.");
  //your function here
 } 
if($("h1").is(":visible"){
  alert("The heading  is visible.");
 }
});
</script>

Es gibt einen Alarm aus, der besagt: Die Überschrift ist versteckt.

Anmerkung: Wenn Sie mehrere Elemente platzieren, von denen eines verborgen und ein anderes sichtbar ist, löst dies sowohl is(":visible") als auch is(":hidden") aus.

Verstehen Sie den :hidden Selektor in jQuery

Der :hidden Selektor identifiziert ein Element aus folgenden Gründen als versteckt:

1. Er hat die CSS-Eigenschaft display mit dem Wert none.
2. Das Element ist ein Formular-Element mit type="hidden".
3. Die Werte height und width des Elements werden explizit auf 0 gesetzt.
4. Das Elternelement wird versteckt.

Daher werden Elemente mit der CSS-Eigenschaft visibility auf hidden oder der Eigenschaft opacity auf 0 gesetzt, in jQuery als sichtbar betrachtet, da sie immer noch Platz im DOM verbrauchen.

Alternativ können wir die spezifische CSS-Eigenschaft des Elements überprüfen, um zu prüfen, ob sie verborgen ist, indem wir die folgende Methode verwenden.

<script>
if ( $(h1).css('display') == 'none' || $(h1).css('opacity') == '0'){
alert("The heading is hidden.");
//your function here
}
</script>

Kurztipps zur Prüfung, ob ein Element verborgen ist

jQuery kann nicht die Vorteile der systemeigenen DOM querySelectorAll()-Methode nutzen. Sie verursacht auch einige Performance-Probleme, da sie den Browser zwingt, die Seite neu zu rendern, um die Sichtbarkeit zu bestimmen. Statt Elemente zu verwenden, können Sie also Klassen oder CSS-Selektoren verwenden und dann .find(":hidden") verwenden.

<h1 style="display:none;">Your text here</h1>
<script>
 $(document).ready(function(){
  var hiddenHeadings = $("body").find(":hidden").is("h1");
   if(hiddenHeadings.length > 0){
    alert("There is atleast one heading hidden.");
   }
 });
</script>

Hier kann direkt auf die hiddenHeadings zugegriffen werden und sie können bearbeitet werden.