Domanda Come posso verificare se un elemento è nascosto in jQuery?


È possibile alternare la visibilità di un elemento, utilizzando le funzioni .hide(), .show() o .toggle().

Come verificherai se un elemento è visibile o nascosto?


6692
2017-10-07 13:03


origine


risposte:


Poiché la domanda si riferisce a un singolo elemento, questo codice potrebbe essere più adatto:

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

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

Uguale a Il suggerimento di twernt , ma applicato a un singolo elemento; ed esso corrisponde all'algoritmo raccomandato nelle FAQ di jQuery


8282
2017-10-07 13:30



Puoi usare il hidden selettore:

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

E il visible selettore:

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

1261
2017-10-07 13:16



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

Le funzioni non funzionano con l'attributo di visibilità.


783
2017-10-07 13:09



Nessuna di queste risposte risponde a quello che capisco essere la domanda, che è quello che stavo cercando, "Come gestisco gli articoli che hanno visibility: hidden?" . Nessuno dei due :visible né :hidden gestirà questo, in quanto entrambi stanno cercando display per la documentazione. Per quanto ho potuto determinare, non esiste un selettore per gestire la visibilità CSS. Ecco come ho risolto (selettori jQuery standard, potrebbe esserci una sintassi più sintetica):

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

450
2018-03-24 18:44



A partire dal Come posso determinare lo stato di un elemento commutato?


Puoi determinare se un elemento è compresso o no usando il :visible e :hidden selettori.

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

Se stai semplicemente agendo su un elemento basato sulla sua visibilità, puoi semplicemente includere :visible o :hidden nell'espressione del selettore. Per esempio:

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

321
2018-01-13 21:13



Spesso quando controlli se qualcosa è visibile o no, vai subito avanti e fai qualcos'altro con esso. jQuery concatenare rende tutto questo facile.

Quindi se hai un selettore e vuoi eseguire qualche azione su di esso solo se è visibile o nascosto, puoi usarlo filter(":visible") o filter(":hidden") seguito dal concatenarlo con l'azione che si desidera intraprendere.

Quindi invece di un if affermazione, come questa:

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

O più efficiente, ma anche più brutto:

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

Puoi fare tutto in un'unica riga:

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

235
2017-07-25 10:21



Il :visible selettore secondo la documentazione di jQuery :

  • Hanno un CSS display valore di none.
  • Sono elementi di forma con type="hidden".
  • La loro larghezza e altezza sono esplicitamente impostate su 0.
  • Un elemento antenato è nascosto, quindi l'elemento non è mostrato nella pagina.

Elementi con visibility: hidden o opacity: 0 sono considerati visibili, dal momento che consumano ancora spazio nel layout.

Questo è utile in alcuni casi e inutile in altri, perché se vuoi controllare se l'elemento è visibile ( display != none), ignorando la visibilità dei genitori, lo troverai .css("display") == 'none' non è solo più veloce, ma restituirà anche il controllo della visibilità correttamente.

Se si desidera verificare la visibilità anziché la visualizzazione, è necessario utilizzare: .css("visibility") == "hidden".

Anche prendere in considerazione le note aggiuntive di jQuery :

Perché :visible è un'estensione jQuery e non fa parte delle specifiche CSS, le query utilizzano :visible non può sfruttare l'incremento di prestazioni fornito dal DOM nativo querySelectorAll() metodo. Per ottenere le migliori prestazioni durante l'utilizzo :visible per selezionare gli elementi, prima seleziona gli elementi usando un puro selettore CSS, quindi usa .filter(":visible").

Inoltre, se sei preoccupato per le prestazioni, dovresti controllare Ora mi vedi ... mostra / nascondi performance  (2010-05-04). E usa altri metodi per mostrare e nascondere elementi.


187
2017-11-25 09:16



Questo funziona per me, e sto usando show() e hide() per rendere il mio div nascosto / visibile:

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

169
2017-07-06 20:19



Come visibilità elemento e jQuery funziona ;

Un elemento potrebbe essere nascosto con display:none, visibility:hidden o opacity:0. La differenza tra questi metodi:

  • display:none nasconde l'elemento e non occupa spazio;
  • visibility:hidden nasconde l'elemento, ma occupa ancora spazio nel layout;
  • opacity:0 nasconde l'elemento come "visibilità: nascosto", e occupa ancora spazio nel layout; l'unica differenza è che l'opacità consente di rendere un elemento parzialmente trasparente;

    if ($('.target').is(':hidden')) {
      $('.target').show();
    } else {
      $('.target').hide();
    }
    if ($('.target').is(':visible')) {
      $('.target').hide();
    } else {
      $('.target').show();
    }
    
    if ($('.target-visibility').css('visibility') == 'hidden') {
      $('.target-visibility').css({
        visibility: "visible",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        visibility: "hidden",
        display: ""
      });
    }
    
    if ($('.target-visibility').css('opacity') == "0") {
      $('.target-visibility').css({
        opacity: "1",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        opacity: "0",
        display: ""
      });
    }
    

    Metodi di commutazione jQuery utili:  

    $('.click').click(function() {
      $('.target').toggle();
    });
    
    $('.click').click(function() {
      $('.target').slideToggle();
    });
    
    $('.click').click(function() {
      $('.target').fadeToggle();
    });
    

165
2018-04-24 21:04