it-swarm.it

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?

7074
Philip Morton

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"); 

Come il suggerimento di twernt , ma applicato a un singolo elemento; e corrisponde all'algoritmo raccomandato in jQuery FAQ

8738

Puoi usare hidden selector:

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

E visible selector:

// Matches all elements that are visible
$('element:visible')
1339
twernt
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden
}

Il metodo sopra non considera la visibilità del genitore. Per considerare anche il genitore, dovresti usare .is(":hidden") o .is(":visible").

Per esempio,

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

Il metodo sopra considererà div2 visibile mentre :visible no. Ma quanto sopra potrebbe essere utile in molti casi, specialmente quando è necessario trovare se ci sono errori div visibili nel genitore nascosto perché in tali condizioni :visible non funzionerà.

850
Mote

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?" . Né :visible:hidden gestiranno questo, poiché entrambi cercano la visualizzazione 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
    }
});
479
aaronLile

Da Come posso determinare lo stato di un elemento attivato?


Puoi determinare se un elemento è compresso o meno usando i selettori :visible e :hidden.

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 selector. Per esempio:

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

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 un'azione su di esso solo se è visibile o nascosto, puoi usare filter(":visible") o filter(":hidden") seguito dal concatenarlo con l'azione che desideri eseguire.

Quindi, invece di un'istruzione if, 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" });
259
Simon_Weaver

Il selettore :visible in base a la documentazione di jQuery :

  • Hanno un valore display CSS 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.

Gli elementi con visibility: hidden o opacity: 0 sono considerati visibili, dal momento che occupano 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, scoprirai che fare .css("display") == 'none' non è solo più veloce, ma restituirà anche il controllo di visibilità correttamente .

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

Prendi anche in considerazione le note aggiuntive di jQuery :

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

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

211
Pedro Rainho

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   */
}
188
Abiy

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();
    });
    
185
webvitaly

Vorrei usare la classe CSS .hide { display: none!important; }

Per nascondere/mostrare, chiamo .addClass("hide")/.removeClass("hide"). Per verificare la visibilità, utilizzo .hasClass("hide").

È un modo semplice e chiaro per controllare/nascondere/mostrare gli elementi, se non si prevede di utilizzare i metodi .toggle() o .animate().

146
Evgeny Levin

Puoi anche farlo usando un semplice JavaScript:

function isRendered(domObj) {
    if ((domObj.nodeType != 1) || (domObj == document.body)) {
        return true;
    }
    if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
        return isRendered(domObj.parentNode);
    } else if (window.getComputedStyle) {
        var cs = document.defaultView.getComputedStyle(domObj, null);
        if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
            return isRendered(domObj.parentNode);
        }
    }
    return false;
}

Gli appunti:

  1. Funziona ovunque

  2. Funziona per elementi nidificati

  3. Funziona per CSS e stili in linea

  4. Non richiede un quadro

141
Matt Brock

Si può semplicemente usare l'attributo hidden o visible, come:

$('element:hidden')
$('element:visible')

Oppure puoi semplificare lo stesso con is come segue.

$(element).is(":visible")
122
ScoRpion

Demo Link 

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />

Fonte: 

Blogger Plug n Play - Strumenti e widget jQuery: come verificare se l'elemento è nascosto o visibile utilizzando jQuery

111
Code Spy

Un'altra risposta che dovresti tenere in considerazione è se stai nascondendo un elemento, dovresti usare jQuery , ma invece di nasconderlo, tu rimuovi l'intero elemento, ma copi il suo HTML content e il tag stesso in una variabile jQuery e quindi tutto ciò che devi fare è verificare se c'è un tale tag sullo schermo, usando il normale if (!$('#thetagname').length).

110
think123

ebdiv dovrebbe essere impostato su style="display:none;". Funziona sia per mostrare che per nascondere:

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});
109
Vaishu

Quando si verifica un elemento con il selettore :hidden in jQuery, si deve considerare che un elemento posizionato in modo assoluto può essere riconosciuto come nascosto sebbene i loro elementi figli siano visibili.

Ciò sembra alquanto controintuitivo in primo luogo, anche se dare un'occhiata più da vicino alla documentazione di jQuery fornisce le informazioni rilevanti:

Gli elementi possono essere considerati nascosti per diversi motivi: [...] La loro larghezza e altezza sono esplicitamente impostati su 0. [...]

Quindi questo ha davvero senso per quanto riguarda il modello di box e lo stile calcolato per l'elemento. Anche se larghezza e altezza non sono impostati esplicitamente a 0, possono essere impostati implicitamente.

Dai un'occhiata al seguente esempio:

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false
.foo {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #ff0000;
}

.bar {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #0000ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <div class="bar"></div>
</div>


AGGIORNAMENTO PER JQUERY 3.x:

Con jQuery 3 il comportamento descritto cambierà! Gli elementi saranno considerati visibili se hanno caselle di layout, comprese quelle di larghezza e/o altezza zero.

JSFiddle con jQuery 3.0.0-alpha1:

http://jsfiddle.net/pM2q3/7/

Lo stesso JS avrà quindi questo output:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
85
conceptdeluxe

Questo può funzionare:

expect($("#message_div").css("display")).toBe("none");
83
Maneesh Kumar

Esempio: 

$(document).ready(function() {
  if ($("#checkme:hidden").length) {
    console.log('Hidden');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
  <span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
  <br>Product: Salmon Atlantic
  <br>Specie: Salmo salar
  <br>Form: Steaks
</div>

63
Irfan DANISH

Per verificare se non è visibile io uso !:

if ( !$('#book').is(':visible')) {
    alert('#book is not visible')
}

O il seguente è anche il sam, salvando il selettore jQuery in una variabile per avere prestazioni migliori quando ne hai bisogno più volte:

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}
62
Matthias Wegtun

Usa la commutazione della classe, non la modifica dello stile. . .

Usare le classi designate per "nascondere" gli elementi è facile e anche uno dei metodi più efficienti. La commutazione di una classe 'nascosta' con uno stile Display di 'none' sarà più veloce rispetto alla modifica diretta di quello stile. Ho spiegato in modo abbastanza approfondito questo argomento nella domanda Stack Overflow / Ruotando due elementi visibili/nascosti nella stessa div.


Best practice e ottimizzazione di JavaScript

Ecco un video davvero illuminante di un tecnico di front-end Google Tech Talk di Google, Nicholas Zakas:

59
Lopsided

Esempio di utilizzo di visible check for adblocker è attivato:

$(document).ready(function(){
  if(!$("#ablockercheck").is(":visible"))
    $("#ablockermsg").text("Please disable adblocker.").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad-placement" id="ablockercheck"></div>
<div id="ablockermsg" style="display: none"></div>

"ablockercheck" è un ID che blocca l'adblocker. Quindi, controllando se è visibile, sei in grado di rilevare se l'adblocker è attivo.

56
Roman Losev

Dopotutto, nessuno degli esempi mi va bene, così ho scritto il mio.

Test (nessun supporto di Internet Explorer filter:alpha):

a) Controllare se il documento non è nascosto

b) Verifica se un elemento ha zero larghezza/altezza/opacità o display:nonevisibility:hidden negli stili in linea

c) Controlla se il centro (anche perché è più veloce di testare ogni pixel/angolo) dell'elemento non è nascosto da un altro elemento (e da tutti gli antenati, ad esempio: overflow:hidden/scroll/un elemento su enother) o i bordi dello schermo

d) Verifica se un elemento ha zero larghezza/altezza/opacità o display:none/visibilità: nascosto negli stili calcolati (tra tutti gli antenati)

_/Testato su

Android 4.4 (browser nativo/Chrome/Firefox), Firefox (Windows/Mac), Chrome (Windows/Mac), Opera (Windows Presto / Mac Webkit), Internet Explorer (modalità documento Internet Explorer 5-11 + Internet Explorer 8 su una macchina virtuale), Safari (Windows/Mac/iOS)

var is_visible = (function () {
    var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
        y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
        relative = !!((!x && !y) || !document.elementFromPoint(x, y));
        function inside(child, parent) {
            while(child){
                if (child === parent) return true;
                child = child.parentNode;
            }
        return false;
    };
    return function (elem) {
        if (
            document.hidden ||
            elem.offsetWidth==0 ||
            elem.offsetHeight==0 ||
            elem.style.visibility=='hidden' ||
            elem.style.display=='none' ||
            elem.style.opacity===0
        ) return false;
        var rect = elem.getBoundingClientRect();
        if (relative) {
            if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false;
        } else if (
            !inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) ||
            (
                rect.top + elem.offsetHeight/2 < 0 ||
                rect.left + elem.offsetWidth/2 < 0 ||
                rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) ||
                rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth)
            )
        ) return false;
        if (window.getComputedStyle || elem.currentStyle) {
            var el = elem,
                comp = null;
            while (el) {
                if (el === document) {break;} else if(!el.parentNode) return false;
                comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle;
                if (comp && (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined' && comp.opacity != 1))) return false;
                el = el.parentNode;
            }
        }
        return true;
    }
})();

Come usare:

is_visible(elem) // boolean
55
Aleko

Devi controllare sia ... Display che visibilità:

if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

Se controlliamo $(this).is(":visible"), jQuery controlla automaticamente entrambe le cose.

50

Forse puoi fare qualcosa di simile

$(document).ready(function() {
   var visible = $('#tElement').is(':visible');

   if(visible) {
      alert("visible");
                    // Code
   }
   else
   {
      alert("hidden");
   }
});
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<input type="text" id="tElement" style="display:block;">Firstname</input>

38
Mathias Stavrou

Poiché Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (come descritto per jQuery: visible Selector ) - possiamo verificare se l'elemento è really visibile in questo modo:

function isElementReallyHidden (el) {
    return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}

var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
    if (isElementReallyHidden(this)) {
        booElementReallyShowed = false;
    }
});
32
Andron

Basta controllare la visibilità controllando un valore booleano, come:

if (this.hidden === false) {
    // Your code
}

Ho usato questo codice per ogni funzione. Altrimenti puoi usare is(':visible') per controllare la visibilità di un elemento.

31
pixellabme
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}
30
Gaurav

Ma cosa succede se il CSS dell'elemento è come il seguente?

.element{
    position: absolute;left:-9999;    
}

Quindi questa risposta alla domanda Stack Overflow Come verificare se un elemento è fuori campo dovrebbe anche essere considerato.

30
RN Kushwaha

Inoltre, ecco un'espressione condizionale ternaria per controllare lo stato dell'elemento e quindi per alternarlo:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
29
cssimsek

È possibile creare una funzione per verificare la visibilità/gli attributi di visualizzazione al fine di valutare se l'elemento è mostrato nell'interfaccia utente o meno. 

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}

Lavorare Fiddle

29
V31
.is(":not(':hidden')") /*if shown*/
25
Kareem

Ho cercato questo e nessuna delle risposte è corretta per il mio caso, quindi ho creato una funzione che restituirà false se gli occhi non possono vedere l'elemento

jQuery.fn.extend({
  isvisible: function() {
    //
    //  This function call this: $("div").isvisible()
    //  Return true if the element is visible
    //  Return false if the element is not visible for our eyes
    //
    if ( $(this).css('display') == 'none' ){
        console.log("this = " + "display:none");
        return false;
    }
    else if( $(this).css('visibility') == 'hidden' ){
        console.log("this = " + "visibility:hidden");   
        return false;
    }
    else if( $(this).css('opacity') == '0' ){
        console.log("this = " + "opacity:0");
        return false;
    }   
    else{
        console.log("this = " + "Is Visible");
        return true;
    }
  }  
});
19
lmcDevloper
if($('#id_element').is(":visible")){
   alert('shown');
}else{
   alert('hidden');
}
18
Prabhagaran

Ecco come jQuery risolve internamente questo problema:

jQuery.expr.pseudos.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

Se non usi jQuery, puoi semplicemente sfruttare questo codice e trasformarlo nella tua funzione:

function isVisible(elem) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

Quale isVisible restituirà true finché l'elemento è visibile.

15
Oriol

Basta semplicemente controllare se quell'elemento è visible e restituirà un booleano , jQuery nasconderà gli elementi aggiungendo none all'elemento, quindi se vuoi usare JavaScript puro, puoi comunque farlo, per esempio:

if (document.getElementById("element").style.display === 'block') { 
  // your element is visible, do whatever you'd like
}

Inoltre, puoi usare jQuery come sembra il resto del tuo codice usando quello e hai un piccolo blocco di codice, qualcosa di simile in jQuery, fai la stessa traccia per te:

if ($(element).is(":visible")) { 
    // your element is visible, do whatever you'd like
};

Anche l'utilizzo del metodo css in jQuery può portare allo stesso risultato:

if ($(element).css('display')==='block') {
    // your element is visible, do whatever you'd like
}

Anche in caso di controllo per visibilità e visualizzazione, puoi fare quanto segue:

if ($(this).css("display")==="block"||$(this).css("visibility")==="visible") {
   // your element is visible, do whatever you'd like
}
14
Alireza

Ci sono diversi modi per verificare se un elemento è visibile o nascosto in jQuery.

Demo HTML come riferimento di esempio

<div id="content">Content</div>
<div id="content2" style="display:none">Content2</div>

Usa selettore filtro visibilità $('element:hidden') o $('element:visible')

  • $('element:hidden'): seleziona tutti gli elementi che sono nascosti.

    Example:
       $('#content2:hidden').show();
    
  • $('element:visible'): seleziona tutti gli elementi visibili.

    Example:
       $('#content:visible').css('color', '#EEE');
    

Maggiori informazioni su http://api.jquery.com/category/selectors/visibility-filter-selectors/

Usa is() Filtering

    Example:
       $('#content').is(":visible").css('color', '#EEE');

    Or checking condition
    if ($('#content').is(":visible")) {
         // Perform action
    }

Maggiori informazioni su http://api.jquery.com/is/

14
Arun Karnawat

Come hide(), show() e toggle() allega in linea css (display: none o display: block) all'elemento . Analogamente, possiamo facilmente usare l'operatore ternario per controllare che l'elemento meteo sia nascosto o visibile controllando il display css.

AGGIORNARE:

  • È inoltre necessario controllare se elemento css impostato su visibilità: "visibile" o visibilità: "nascosto"
  • L'elemento sarà visibile anche se la proprietà di visualizzazione è impostata su blocco in linea, blocco, flex.

Quindi possiamo verificare la proprietà dell'elemento che lo rende invisibile. Quindi sono display: none e visibility: "hidden";

Possiamo creare un oggetto per controllare la proprietà responsabile dell'elemento nascosto:

var hiddenCssProps = {
display: "none",
visibility: "hidden"
}

È possibile verificare eseguendo il looping di ciascun valore chiave nell'abbinamento dell'oggetto se la proprietà dell'elemento per le corrispondenze di chiave con il valore di proprietà nascosto.

var isHidden = false;
for(key in hiddenCssProps) {
  if($('#element').css(key) == hiddenCssProps[key]) {
     isHidden = true;
   }
}

Se si desidera controllare la proprietà come altezza elemento: 0 o larghezza: 0 o più, è possibile estendere questo oggetto e aggiungere più proprietà e controllare.

Grazie a @Krzysztof Przygoda per avermi ricordato altre proprietà del display.

14
No one

Puoi usare questo:

$(element).is(':visible');

Codice di esempio

$(document).ready(function()
{
    $("#toggle").click(function()
    {
        $("#content").toggle();
    });

    $("#visiblity").click(function()
    {
       if( $('#content').is(':visible') )
       {
          alert("visible"); // Put your code for visibility
       }
       else
       {
          alert("hidden");
       }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<p id="content">This is a Content</p>

<button id="toggle">Toggle Content Visibility</button>
<button id="visibility">Check Visibility</button>

13
Abrar Jahin

Questa è un'opzione per verificare che il tag sia visibile o meno

 // using a pure CSS selector  
   if ($('p:visible')) {  
      alert('Paragraphs are visible (checked using a CSS selector) !');  
   };  
  
   // using jQuery's is() method  
   if ($('p').is(':visible')) {  
      alert('Paragraphs are visible (checked using is() method)!');  
   };  
  
   // using jQuery's filter() method  
   if ($('p').filter(':visible')) {  
      alert('Paragraphs are visible (checked using filter() method)!');  
   };  
  
   // you can use :hidden instead of :visible to reverse the logic and check if an element is hidden  
   // if ($('p:hidden')) {  
   //    do something  
   // };  

11
Sangeet Shah

Voglio solo chiarire che, in jQuery,

Gli elementi possono essere considerati nascosti per diversi motivi:

  • Hanno un valore di visualizzazione CSS pari a 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 visibilità: nascosti o opacità: 0 sono considerati visibili, dal momento che occupano ancora spazio nel layout. Durante le animazioni che nascondono un elemento, l'elemento è considerato visibile fino alla fine dell'animazione.

Fonte: : Selettore nascosto | Documentazione API jQuery

if($('.element').is(':hidden')) {
  // Do something
}
10
Sky Yip

Puoi semplicemente aggiungere una classe quando è visibile. Aggiungi una classe, show. Quindi controlla che abbia una classe:

$('#elementId').hasClass('show');

Restituisce true se si ha la classe show.

Aggiungi CSS come questo:

.show{ display: block; }
9
Sahan

Ci sono troppi metodi per verificare la presenza di elementi nascosti. Questa è la scelta migliore (ti ho appena raccomandato):

Usando jQuery, crea un elemento, "display: none", in CSS per nascosto.

Il punto è:

$('element:visible')

E un esempio per l'uso:

$('element:visible').show();
7

Controlla semplicemente l'attributo display (o visibility a seconda del tipo di invisibilità che preferisci). Esempio :

if ($('#invisible').css('display') == 'none') {
    // This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
}
5
Antoine Auffray

Puoi usare il 

$( "div:visible" ).click(function() {
  $( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
  $( "div:hidden" ).show( "fast" );
});

Documentazione API: https://api.jquery.com/visible-selector/

4
Wolfack

1 • soluzione jQuery

Metodi per determinare se un elemento è visibile in JQuery

<script>
if ($("#myelement").is(":visible")){alert ("#myelement is visible");}
if ($("#myelement").is(":hidden")){alert ("#myelement is hidden"); }
</script>

Loop su tutti i visible div figli dell'elemento di id 'myelement':

$("#myelement div:visible").each( function() {
 //Do something
});

Sbirciati alla fonte di jQuery

Ecco come jQuery implementa questa funzionalità:

jQuery.expr.filters.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

2 • Come verificare se un elemento è fuori campo - CSS

Utilizzando Element.getBoundingClientRect () puoi facilmente rilevare se il tuo elemento si trova all'interno dei limiti della tua finestra (ad esempio sullo schermo o fuori dallo schermo):

jQuery.expr.filters.offscreen = function(el) {
  var rect = el.getBoundingClientRect();
  return (
           (rect.x + rect.width) < 0 
             || (rect.y + rect.height) < 0
             || (rect.x > window.innerWidth || rect.y > window.innerHeight)
         );
};

Potresti quindi usarlo in diversi modi:

// returns all elements that are offscreen
$(':offscreen');

// boolean returned if element is offscreen
$('div').is(':offscreen');

Se si utilizza Angolare, selezionare: Non utilizzare l'attributo nascosto con Angular

3
Lyes CHIOUKH
if($("h1").is(":hidden")){
    // your code..
}
3
cbertelegni

Alcune volte, se vuoi controllare se l'elemento è visibile sulla pagina, a seconda della visibilità del suo parrent, puoi controllare se width e height, di elemento, sono uguali a 0, entrambi.

jQuery

$element.width() === 0 && $element.height() === 0

Vaniglia

element.clientWidth === 0 && element.clientHeight === 0

O

element.offsetWidth === 0 && element.offsetHeight === 0

2
Profesor08

Puoi utilizzare una classe css quando è visibile o nascosta attivando la classe.

.show{ display :block; }

Imposta jQuery toggleClass() o addClass() o removeClass();.

Come esempio,

jQuery('#myID').toggleClass('show')

Il codice sopra aggiungerà la classe show css quando l'elemento non ha show e rimuoverà quando ha show class.

E quando stai verificando se è visibile o meno, puoi seguire questo codice jQuery,

jQuery('#myID').hasClass('show'); 

Il codice sopra restituirà un valore booleano (true) quando l'elemento #myID ha la nostra classe (show) e false quando non ha la classe (show).

0
Sahan

Invece di scrivere un event per ogni singolo element, fai questo:

$('div').each(function(){
  if($(this).css('display') === 'none'){
    $(this).css({'display':'block'});
  }
});

Inoltre puoi usarlo sugli ingressi:

$('input').each(function(){
  if($(this).attr('type') === 'hidden'){
    $(this).attr('type', 'text');
  }
});
0
user10145552

Puoi farlo:

isHidden = function(element){
    return (element.style.display === "none");
};

if(isHidden($("element")) == true){
    // something
}
0
user8903269

soluzione jQuery, domanda piuttosto vecchia ma ancora mi sento in grado di dare una risposta un po 'migliore per coloro che vogliono cambiare anche il testo del pulsante.

$(function(){
  $("#showHide").click(function(){
    var btn = $(this);
    $("#content").toggle(function () {
      btn.text($(this).css("display") === 'none' ? "Show" : "Hide");
    });
   });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="showHide">Hide</button>
<div id="content">
  <h2>Some content</h2>
  <p>
  What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </p>
</div>

0
Muhammad
$('someElement').on('click', function(){ $('elementToToggle').is(':visible')
0
user6119825

Per essere onesti, la domanda è precedente a questa risposta. Lo aggiungo per non criticare il PO ma per aiutare chiunque ancora a fare questa domanda.

Il modo corretto per determinare se qualcosa è visibile è consultare il tuo modello di visualizzazione. Se non sai cosa significa, stai per intraprendere un viaggio di scoperta che renderà il tuo lavoro molto meno difficile.

Ecco una panoramica di model-view-viewmodel architecture (MVVM).

KnockoutJS è una libreria di binding che ti permetterà di provare questa roba senza imparare un intero framework.

Ed ecco alcuni JS e un DIV che possono o non possono essere visibili.

<html><body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script>
var vm = {
  IsDivVisible: ko.observable(true);
}
vm.toggle = function(data, event) {
  //get current visibility state for the div
  var x = IsDivVisible();
  //set it to the opposite
  IsDivVisible(!x);
}
ko.applyBinding(vm);
</script>
<div data-bind="visible: IsDivVisible">Peekaboo!</div>
<button data-bind="click: toggle">Toggle the div's visibility</button>
</body></html>

Si noti che la funzione di commutazione non consulta il DOM per determinare la visibilità del div, consulta il modello di vista.

0
Peter Wone