Pytanie Jak sprawdzić, czy element jest ukryty w jQuery?


Możliwe jest przełączanie widoczności elementu za pomocą funkcji .hide(), .show() lub .toggle().

Jak byś przetestował, czy element jest widoczny lub ukryty?


6705
2017-10-07 13:03


pochodzenie


Warto wspomnieć (nawet po tak długim czasie), że $(element).is(":visible") działa dla jQuery 1.4.4, ale nie dla jQuery 1.3.2, pod Internet & nbsp; Explorer & nbsp; 8. Można to przetestować za pomocą Pomocny fragment testowy Tsvetomir Tsonev. Pamiętaj tylko, aby zmienić wersję jQuery, aby przetestować pod każdym z nich. - Reuben
Jest to powiązane, chociaż inne pytanie: stackoverflow.com/questions/17425543/... - Mark Schultheiss
Jaka jest twoja definicja ukryta? - fabspro


Odpowiedzi:


Ponieważ pytanie odnosi się do pojedynczego elementu, ten kod może być bardziej odpowiedni:

// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible"); 

// The same works with hidden
$(element).is(":hidden"); 

Taki sam jak sugestia twernta, ale zastosowane do jednego elementu; i to pasuje do algorytmu zalecanego w jQuery FAQ


8294
2017-10-07 13:30



To rozwiązanie wydaje się zachęcać do konfesjonału visible=false i display:none; mając na uwadze, że rozwiązanie Mote wyraźnie zignorowało koderów chcących sprawdzić display:none; (poprzez wzmiankę o hide i pokaż, która kontrola display:none nie visible=true) - kralco626
Zgadza się, ale :visible sprawdzi także, czy elementy macierzyste są widoczne, jak zauważył Chiborg. - Tsvetomir Tsonev
Masz rację - wyjaśnię, że kod sprawdza tylko dla display własność. Biorąc pod uwagę, że pierwotne pytanie dotyczy show() i hide()i oni ustawili display, moja odpowiedź jest poprawna. Przy okazji działa z IE7, oto przykładowy fragment kodu - jsfiddle.net/MWZss ; - Tsvetomir Tsonev
W rzeczywistości stwierdziłem, że zwrotne słowa logiczne lepiej:! $ ("Selektor"). Jest (": ukryty"); z jakiegoś powodu. Warte spróbowania. - Kzqai
Oto prosty test porównawczy () w stosunku do regexp:jsperf.com/jquery-is-vs-regexp-for-css-visibility. Wniosek: jeśli nie masz wydajności, użyj wyrażenia regularnego przez is () (ponieważ is () najpierw szuka wszystkich ukrytych węzłów przed spojrzeniem na rzeczywisty element). - Max Leske


Możesz użyć hidden selektor:

// Matches all elements that are hidden
$('element:hidden')

I visible selektor:

// Matches all elements that are visible
$('element:visible')

1264
2017-10-07 13:16



bądź ostrożny, w tej prezentacji są wskazówki dotyczące dobrych wyników: addyosmani.com/jqprovenvenformance - codecraig
Na stronach od 21 do 28 pokazuje, jak wolno: ukryty lub: widoczny jest porównywany z innymi selektorami. Dzięki za wskazanie tego. - Etienne Dupuis
Kiedy masz do czynienia z kilkoma elementami i niewiele się dzieje - tj. WIĘKSZĄ POMOCĄ PRZYPADKÓW - kwestia czasu jest absurdalnie niewielkim problemem. Och nie! Zajęło to 42 ms zamiast 19 ms !!! - vbullinger
Przełączam element używając tego selektora. $ ("element: hidden") jest zawsze dla mnie prawdziwy! - ZoomIn
@ cwingrav Możesz chcieć ponownie przeczytać dokumentację: ukryty dotyczy wszystkich elementów. Formuj elementy za pomocą type="hidden" to tylko jeden przypadek, który może wywołać: ukryty. Elementy bez wysokości i szerokości, elementy z display: none, a elementy z ukrytymi przodkami będą również kwalifikować się jako: ukryte. - Joshua Walsh


if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden
}

Powyższa metoda nie uwzględnia widoczności rodzica. Aby wziąć pod uwagę także rodzica, powinieneś użyć .is(":hidden") lub .is(":visible").

Na przykład,

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

Powyższa metoda uwzględni div2 widoczny podczas :visible nie. Ale powyższe może być przydatne w wielu przypadkach, zwłaszcza gdy musisz znaleźć, czy w ukrytym obiekcie macierzystym są widoczne bloki błędów, ponieważ w takich warunkach :visible nie będzie działać.


784
2017-10-07 13:09



Sprawdza tylko właściwość wyświetlania pojedynczego elementu. Atrybut widoczny: sprawdza również widoczność elementów nadrzędnych. - chiborg
To jedyne rozwiązanie, które sprawdziło się podczas testów z IE 8. - evanmcd
Nie jest to rozwiązanie mojego problemu, ale metoda pomogła mi zidentyfikować poprawkę do sprawdzania właściwości względem mojego problemu. - dchayka
@chiborg Tak, ale czasami tego właśnie chcesz i musiałem nauczyć się, jak bardzo "sprytny" był jQuery ... - Casey
To odpowiada na pytanie, ponieważ pytanie dotyczy pojedynczego elementu i użycia hide(), show() i toggle() jednak funkcje, jak większość już powiedzieliśmy, powinniśmy używać :visible i :hidden pseudoklasy. - Jimmy Knoot


Żadna z tych odpowiedzi nie dotyczy tego, o czym myślę, że jest to pytanie, którego właśnie szukałem, "Jak obsługiwać przedmioty, które posiadały visibility: hidden? ". Ani :visible ani :hidden poradzi sobie z tym, ponieważ obaj szukają wyświetlania w dokumentacji. O ile mogę stwierdzić, nie ma selektora do obsługi widoczności CSS. Oto jak to rozwiązałem (standardowe selektory jQuery, może być bardziej skondensowana składnia):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

451
2018-03-24 18:44



Ta odpowiedź jest dobra w obsłudze visibility dosłownie, ale pytanie było How you would test if an element has been hidden or shown using jQuery?. Korzystanie z jQuery oznacza: display własność. - MarioDS
Elementy z visibility: hidden lub opacity: 0 są uważane za widoczne, ponieważ nadal zajmują miejsce w układzie. Widzieć odpowiedź przez Pedro Rainho i dokumentacja jQuery na :visible selektor. - awe
musisz przejść przez DOM, aby sprawdzić rodziców węzła, albo jest to bezużyteczne. - vsync
to nie zadziała, jeśli ukryjesz element za pomocą .hide (). - user3197818


Od Jak określić stan włączonego elementu?


Możesz określić, czy element jest zwinięty, czy nie, korzystając z :visible i :hidden selektory.

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

Jeśli po prostu działasz na elemencie w oparciu o jego widoczność, możesz po prostu dołączyć :visible lub :hidden w wyrażeniu selektora. Na przykład:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');

322
2018-01-13 21:13



Zastanawiając się, dlaczego żadna odpowiedź nie wspomina o przypadku, kiedy element jest odsunięty od widocznego okna, na przykład top:-1000px... Zgadnij, że to skrajna sprawa - jazzcat


Często podczas sprawdzania, czy coś jest widoczne, czy nie, natychmiast przejdziesz od razu i zrobisz coś innego. połączenie jQuery ułatwia to.

Więc jeśli masz selektor i chcesz wykonać na nim jakąś akcję, tylko jeśli jest widoczna lub ukryta, możesz użyć filter(":visible") lub filter(":hidden") a następnie łącząc go z działaniem, które chcesz podjąć.

Więc zamiast if oświadczenie, takie jak to:

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

Lub bardziej wydajne, ale jeszcze brzydsze:

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

Możesz zrobić to wszystko w jednym wierszu:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

236
2017-07-25 10:21



Nie ma powodu, aby wyodrębnić węzeł DOM z urywka użytego w przykładzie, a następnie trzeba go ponownie wyświetlić. Lepiej po prostu zrobić: var $ button = $ ('# btnUpdate'); A następnie w wyrażeniach If po prostu użyj przycisku $ zamiast $ (przycisk). Ma tę zaletę, że buforuje obiekt jQuery. - LocalPCGuy
oto prosty przykład jquerypot.com/... - Ketan Savaliya


The :visible selektor zgodnie z dokumentacja jQuery:

  • Mają CSS display wartość none.
  • Są to elementy formy z type="hidden".
  • Ich szerokość i wysokość są jawnie ustawione na 0.
  • Element nadrzędny jest ukryty, więc element nie jest wyświetlany na stronie.

Elementy z visibility: hidden lub opacity: 0 są uważane za widoczne, ponieważ nadal zajmują miejsce w układzie.

Jest to przydatne w niektórych przypadkach i bezużyteczne w innych, ponieważ jeśli chcesz sprawdzić, czy element jest widoczny (display != none), ignorując widoczność rodziców, przekonasz się, że to robisz .css("display") == 'none' jest nie tylko szybszy, ale również zwróci poprawną kontrolę widoczności.

Jeśli chcesz sprawdzić widoczność zamiast wyświetlania, powinieneś użyć: .css("visibility") == "hidden".

Weź również pod uwagę dodatkowe uwagi jQuery:

Bo :visible jest rozszerzeniem jQuery i nie jest częścią specyfikacji CSS, zapytania używają :visible nie można wykorzystać zwiększenia wydajności zapewnianego przez natywny DOM querySelectorAll() metoda. Aby uzyskać najlepszą wydajność podczas używania :visible aby wybrać elementy, najpierw wybierz elementy za pomocą czystego selektora CSS, a następnie użyj .filter(":visible").

Ponadto, jeśli obawiasz się o wydajność, powinieneś sprawdzić Teraz widzisz mnie ... pokaż / ukryj wydajność (2010-05-04). I użyj innych metod, aby pokazać i ukryć elementy.


188
2017-11-25 09:16





To działa dla mnie i ja używam show() i hide() aby mój div był ukryty / widoczny:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}

170
2017-07-06 20:19