Wie prüfe ich, ob ein Element in jQuery ausgeblendet ist?

Question

Ist es möglich, die Sichtbarkeit eines Elements umzuschalten, indem man die Funktionen .hide() , .show() ou .toggle() ?

Wie würden Sie testen, ob ein Element visible ou hidden ?

Answer 1

Wenn man prüft, ob etwas sichtbar ist oder nicht, geht man oft gleich weiter und macht etwas anderes damit. jQuery chaining macht dies einfach.

Wenn Sie also einen Selektor haben und eine Aktion nur dann ausführen wollen, wenn er sichtbar oder versteckt ist, können Sie filter(":visible") ou filter(":hidden") gefolgt von der Verkettung mit der Aktion, die Sie durchführen möchten.

Anstelle einer if Aussage, etwa so:

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

Oder effizienter, aber noch hässlicher:

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

Sie können das alles in einer Zeile machen:

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

Answer 2

Le site :visible Selektor nach die jQuery-Dokumentation :

• Sie haben ein CSS display Wert von none .
• Sie sind Formularelemente mit type="hidden" .
• Ihre Breite und Höhe werden ausdrücklich auf 0 gesetzt.
• Ein Vorgängerelement ist ausgeblendet, d. h. das Element wird auf der Seite nicht angezeigt.

Elemente mit visibility: hidden ou opacity: 0 gelten als sichtbar, da sie noch Platz im Layout beanspruchen.

Dies ist in einigen Fällen nützlich und in anderen nutzlos, denn wenn Sie prüfen wollen, ob das Element sichtbar ist ( display != none ), wobei die Sichtbarkeit der Eltern ignoriert wird, werden Sie feststellen, dass die .css("display") == 'none' ist nicht nur schneller, sondern gibt auch die Sichtbarkeitsprüfung korrekt zurück.

Wenn Sie die Sichtbarkeit statt der Anzeige prüfen wollen, sollten Sie dies tun: .css("visibility") == "hidden" .

Berücksichtigen Sie auch die zusätzlichen jQuery-Hinweise :

Denn :visible ist eine jQuery-Erweiterung und nicht Teil der CSS-Spezifikation, Abfragen mit :visible nicht von der Leistungssteigerung durch das native DOM profitieren können querySelectorAll() Methode. Um die beste Leistung zu erzielen, wenn Sie :visible um Elemente auszuwählen, wählen Sie die Elemente zunächst mit einem reinen CSS-Selektor aus und verwenden dann .filter(":visible") .

Wenn Sie sich Sorgen um die Leistung machen, sollten Sie außerdem Folgendes prüfen Jetzt siehst du mich Leistung anzeigen/verbergen (2010-05-04). Und verwenden Sie andere Methoden zum Ein- und Ausblenden von Elementen.

Answer 3

Wie Element Sichtbarkeit und jQuery funktioniert ;

Ein Element kann versteckt werden mit display:none , visibility:hidden ou opacity:0 . Der Unterschied zwischen diesen Methoden:

• display:none blendet das Element aus, so dass es keinen Platz beansprucht;
• visibility:hidden blendet das Element aus, aber es nimmt weiterhin Platz im Layout ein;

• opacity:0 verbirgt das Element als "visibility:hidden", und es nimmt immer noch Platz im Layout ein; der einzige Unterschied ist, dass man mit opacity ein Element teilweise transparent machen kann;

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

  Nützliche jQuery Toggle-Methoden:

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

Answer 4

Das funktioniert bei mir, und ich verwende show() et hide() um mein Div versteckt/sichtbar zu machen:

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

Answer 5

Sie können dies auch mit einfachem JavaScript tun:

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

Anmerkungen:

1. Funktioniert überall

2. Funktioniert bei verschachtelten Elementen

3. Funktioniert für CSS und Inline-Stile

4. Benötigt keinen Rahmen