Überprüfen Sie mit jQuery, ob ein Element "display: none" ist oder beim Klicken blockiert

239

Ich möchte versteckte Elemente überprüfen und sortieren. Ist es möglich, alle Elemente mit Attribut displayund Wert zu finden none?

jquery css Nicholas Francis
quelle

Antworten:

542

Sie können verwenden : sichtbar für sichtbare Elemente und : versteckt , um versteckte Elemente herauszufinden. Für diese versteckten Elemente ist das displayAttribut festgelegt none.

hiddenElements = $(':hidden');
visibleElements = $(':visible');

Um ein bestimmtes Element zu überprüfen.

if($('#yourID:visible').length == 0)
{

}

Elemente gelten als sichtbar, wenn sie Speicherplatz im Dokument belegen. Sichtbare Elemente haben eine Breite oder Höhe , die größer als Null ist, Referenz

Sie können auch is () mit verwenden:visible

if(!$('#yourID').is(':visible'))
{

}

Wenn Sie den Wert der Anzeige überprüfen möchten, können Sie css () verwenden.

if($('#yourID').css('display') == 'none')
{

}

Wenn Sie die Anzeige verwenden, können die folgenden Werte displayvorliegen.

Anzeige: keine

Anzeige: Inline

Bildschirmsperre

Anzeige: Listenelement

Anzeige: Inline-Block

Überprüfen vollständige Liste der möglichen displayWerte hier .

So überprüfen Sie die Anzeigeeigenschaft mit JavaScript

var isVisible = document.getElementById("yourID").style.display == "block";
var isHidden = document.getElementById("yourID").style.display == "none";
Adil
quelle
Nun, in meinem Szenario hat jedes Element eine ID, also funktioniert der Trick für mich :)
Nicholas Francis
2
@NicholasFrancis, ich habe meine Antwort aktualisiert, um alle versteckten Elemente herauszufinden.
Adil
Überprüft es auch Inline-CSS? Ich habe CSS display: block;inline geschrieben von jquery geschrieben. Ich kann es nicht mit Ihrer Methode überprüfen. Hilf mir.
Gaurav Manral
Wird jQuery hinzugefügt und Sie greifen auf das Element zu, nachdem es zu DOM hinzugefügt wurde? Können Sie mir den Code zeigen? Es wäre besser, eine Demo auf jsfiddle.net
Adil
Was ist das JavaScript-Äquiv?
TheBlackBenzKid
56 
$("element").filter(function() { return $(this).css("display") == "none" });
Deepanshu Goyal
quelle
7
+1: Dies ist tatsächlich nützlicher als die akzeptierte Antwort auf die gestellte Frage , da dies auch dann funktioniert, wenn ein übergeordnetes Element vorhanden ist style="display: none;". Antworten mit :visibleund :hiddenschlagen fehl, wenn Sie eine bestimmte Elementsichtbarkeit wünschen und ein übergeordnetes Element ausgeblendet ist, da diese Selektoren die allgemeine Sichtbarkeit auf der Seite zurückgeben (was nicht die gestellte Frage war).
Gone Coding
Dies funktioniert, wenn Unite Test in einer JS DOM-Umgebung ausgeführt wird.
B01
Für ein Tabbing-Plugin wurde es visibility: 'hidden';in CSS eingestellt, so dass die Überprüfung auch $(this).css('visibility') != 'hidden'
Folgendes
30

Ja, Sie können die CSS-Funktion verwenden. Im Folgenden werden alle Divs durchsucht, aber Sie können sie für alle benötigten Elemente ändern

$('div').each(function(){

    if ( $(this).css('display') == 'none')
    {
       //do something
    }
});
jjhavokk
quelle
13

Verwenden Sie diese Bedingung:

if (jQuery(".profile-page-cont").css('display') == 'block'){
    // Condition 
}
Rana
quelle
11

In jQuery gibt es zwei Methoden, um die Sichtbarkeit zu überprüfen:

$("#selector").is(":visible")

und 

$("#selector").is(":hidden")

Sie können Befehle auch basierend auf der Sichtbarkeit im Selektor ausführen.

$("#selector:visible").hide()

oder 

$("#selector:hidden").show()
Luceos
quelle
6
Hinweis: Dies gibt nicht das spezifische sichtbare Attribut der ausgewählten Elemente zurück, wie in der Frage gefragt, da dies :visibleauch von der Sichtbarkeit der übergeordneten Vorfahren abhängt. Wenn ein Vorfahr display: nonealle Nachkommen sind, sind sie unabhängig vom displayStatus nicht sichtbar .
Gone Coding
10 
$('#selector').is(':visible');
Barry Chapman
quelle
3
Hinweis: Dies gibt nicht das spezifische sichtbare Attribut der ausgewählten Elemente zurück, wie in der Frage gefragt, da dies :visibleauch von der Sichtbarkeit der übergeordneten Vorfahren abhängt. Wenn ein Vorfahr display: nonealle Nachkommen sind, sind sie unabhängig vom displayStatus nicht sichtbar .
Gone Coding