Za pomocą jQuery sprawdź, czy elementem jest „display: none” lub blok po kliknięciu

239

Chcę sprawdzać i sortować ukryte elementy. Czy można znaleźć wszystkie elementy z atrybutem displayi wartością none?

jquery css Nicholas Francis
źródło

Odpowiedzi:

542

Możesz użyć : widoczne dla widocznych elementów i : ukryte, aby znaleźć ukryte elementy. Te ukryte elementy mają displayustawiony atrybut na none.

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

Aby sprawdzić konkretny element.

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

}

Elementy są uważane za widoczne, jeśli zajmują miejsce w dokumencie. Widoczne elementy mają szerokość lub wysokość większą niż zero, odniesienie

Możesz także użyć is () z:visible

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

}

Jeśli chcesz sprawdzić wartość wyświetlania, możesz użyć css ()

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

}

Jeśli używasz wyświetlacza, displaymogą mieć następujące wartości .

Nie wyświetla się

wyświetlacz: wbudowany

Blok wyświetlacza

wyświetl: element listy

display: blok wbudowany

Sprawdź pełną listę możliwych displaywartości tutaj .

Aby sprawdzić właściwość wyświetlania za pomocą JavaScript

var isVisible = document.getElementById("yourID").style.display == "block";
var isHidden = document.getElementById("yourID").style.display == "none";
Adil
źródło
cóż, w moim scenariuszu każdy element ma identyfikator, więc sztuczka działa dla mnie :)
Nicholas Francis
2
@NicholasFrancis, zaktualizowałem swoją odpowiedź, aby znaleźć wszystkie ukryte elementy.
Adil
Czy sprawdza również wbudowany css. Mam css display: block;napisany inline pochodzący z jquery. nie mogę tego sprawdzić za pomocą Twojej metody. Pomóż mi.
Gaurav Manral
Czy dodano jQuery i uzyskujesz dostęp do elementu po dodaniu go do DOM? Czy możesz mi pokazać kod? Lepiej byłoby zrobić demo na jsfiddle.net
Adil
Co to jest equiv JavaScript?
TheBlackBenzKid
56 
$("element").filter(function() { return $(this).css("display") == "none" });
Deepanshu Goyal
źródło
7
+1: Jest to w rzeczywistości bardziej przydatne niż zaakceptowana odpowiedź na zadane pytanie , ponieważ zadziała to, nawet jeśli element macierzysty ma style="display: none;". Odpowiedzi przy użyciu :visiblei :hiddenzakończą się niepowodzeniem, jeśli chcesz widoczność określonego elementu, a element nadrzędny jest ukryty, ponieważ selektory zwracają ogólną widoczność na stronie (co nie było pytaniem).
Gone Coding
Działa to podczas uruchamiania testu zjednoczenia w środowisku JS DOM.
b01
Dla wtyczki z visibility: 'hidden';$(this).css('visibility') != 'hidden'
kartami ustawiało się
30

Tak, możesz użyć funkcji css. Poniżej przeszuka wszystkie divy, ale możesz je zmodyfikować dla potrzebnych elementów

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

    if ( $(this).css('display') == 'none')
    {
       //do something
    }
});
jjhavokk
źródło
13

Użyj tego warunku:

if (jQuery(".profile-page-cont").css('display') == 'block'){
    // Condition 
}
Rana
źródło
11

W jQuery istnieją dwie metody sprawdzania widoczności:

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

i 

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

Możesz także wykonywać polecenia na podstawie widoczności w selektorze;

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

lub 

$("#selector:hidden").show()
Luceos
źródło
6
Uwaga: nie zwróci to określonego widocznego atrybutu wybranych elementów, jak zadaje pytanie, ponieważ :visiblezależy to również od widoczności przodka nadrzędnego. Jeśli przodek jest display: nonepotomkiem, potomkowie nie będą widoczni bez względu na displaystan.
Gone Coding
10 
$('#selector').is(':visible');
Barry Chapman
źródło
3
Uwaga: nie zwróci to określonego widocznego atrybutu wybranych elementów, jak zadaje pytanie, ponieważ :visiblezależy to również od widoczności przodka nadrzędnego. Jeśli przodek jest display: nonepotomkiem, potomkowie nie będą widoczni bez względu na displaystan.
Gone Coding