Controlla, usando jQuery, se un elemento è 'display: none' o blocca al clic

240

Voglio controllare e ordinare gli elementi nascosti. È possibile trovare tutti gli elementi con attributo displaye valore none?

jquery css

— Nicholas Francis
fonte

543

Puoi usare : visible per elementi visibili e : hidden per scoprire elementi nascosti. Gli elementi nascosti hanno l' displayattributo impostato su none.

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

Per controllare un elemento particolare.

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

}

Gli elementi sono considerati visibili se consumano spazio nel documento. Gli elementi visibili hanno una larghezza o altezza maggiore di zero, Riferimento

Puoi anche usare is () con:visible

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

}

Se vuoi controllare il valore di display allora puoi usare css ()

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

}

Se si utilizza display, displaypossono essere presenti i seguenti valori .

display: nessuno

display: in linea

blocco di visualizzazione

display: voce di elenco

display: blocco in linea

Controllare l'elenco completo dei possibili displayvalori qui .

Per controllare la proprietà di visualizzazione con JavaScript

var isVisible = document.getElementById("yourID").style.display == "block";
var isHidden = document.getElementById("yourID").style.display == "none";

— Adil
fonte

bene, nel mio scenario, ogni elemento ha un ID, quindi il trucco funziona per me :)

— Nicholas Francis

2

@NicholasFrancis, ho aggiornato la mia risposta per scoprire tutti gli elementi nascosti.

— Adil,

Controlla anche i CSS in linea. Ho display: block;scritto CSS in linea proveniente da jquery. non riesco a verificarlo con il tuo metodo. aiutami.

— Gaurav Manral,

JQuery è stato aggiunto e si accede all'elemento dopo essere stato aggiunto a DOM? Puoi mostrarmi il codice? Sarebbe meglio fare una demo su jsfiddle.net

— Adil,

Cos'è l'equiv di JavaScript?

— TheBlackBenzKid

56

$("element").filter(function() { return $(this).css("display") == "none" });

— Deepanshu Goyal
fonte

7

+1: in realtà è più utile della risposta accettata per la domanda posta , poiché funzionerà anche se è presente un elemento padre style="display: none;". Le risposte utilizzano :visiblee :hiddenfalliranno se si desidera la visibilità di un elemento specifico e un elemento padre viene nascosto poiché quei selettori restituiscono la visibilità complessiva sulla pagina (che non era la domanda posta).

— Gone Coding

Funziona quando si esegue il test di unione in ambiente DOM JS.

— b01,

Per un plug-in di tabulazione, si stava impostando visibility: 'hidden';in CSS, quindi il controllo è finito anche controllando:$(this).css('visibility') != 'hidden'

— phyatt

30

Sì, è possibile utilizzare la funzione css. Il seguito cercherà tutti i div, ma puoi modificarlo per qualsiasi elemento tu abbia bisogno

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

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

— jjhavokk
fonte

13

Usa questa condizione:

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

— rana
fonte

11

Esistono due metodi in jQuery per verificare la visibilità:

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

e

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

È inoltre possibile eseguire comandi in base alla visibilità nel selettore;

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

o

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

— Luceos
fonte

6

Nota: questo non restituirà l'attributo visibile specifico degli elementi selezionati, come pone la domanda, poiché :visibledipende anche dalla visibilità dell'antenato padre. Se un antenato è display: nonetutto discendente non sarà visibile indipendentemente dallo displaystato.

— Gone Coding

10

$('#selector').is(':visible');

— Barry Chapman
fonte

3

Nota: questo non restituirà l'attributo visibile specifico degli elementi selezionati, come pone la domanda, poiché :visibledipende anche dalla visibilità dell'antenato padre. Se un antenato è display: nonetutto discendente non sarà visibile indipendentemente dallo displaystato.

— Gone Coding