Ü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

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