javascript - visible get Come posso verificare se un elemento è nascosto in jQuery?



15 Answers

Puoi usare il selettore hidden :

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

E il selettore visible :

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

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

Come verificherai se un elemento è visibile o nascosto?




Nessuna di queste risposte risponde a quello che capisco essere la domanda, che è quello che stavo cercando, "Come gestisco gli oggetti che hanno visibility: hidden ?" . Né :visible:hidden gestirà questo, in quanto 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
    }
});



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 usare filter(":visible") o filter(":hidden") seguito dal concatenarlo con l'azione che vuoi prendere.

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



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



Vorrei usare la classe CSS. .hide { display: none!important; } .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 .toggle() o .animate() .




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

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

O è possibile semplificare lo stesso con è il seguente.

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



$('#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

jsFiddle:

JSFiddle - ipsjolly - k4WWj




Quando si verifica un elemento contro :hidden 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 impostate esplicitamente su 0, possono essere impostate 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



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>




Utilizzare 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 di Display di "nessuno" viene eseguita più rapidamente rispetto alla modifica diretta di tale stile. Ho spiegato in modo abbastanza approfondito questo argomento in question Girando due elementi visibili / nascosti nello stesso 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:




L'esempio di utilizzo del controllo visibile per 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.




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>




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



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.




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'); });



Related