Rufen Sie nur die Elemente ab, die nicht ausgeblendet sind. Jquery

Lesezeit: 3 Minuten

Vinoth Babus Benutzeravatar
Vinoth Babu

Ich muss nur das Element show() in der foreach-Schleife von jquery abrufen

Im folgenden Code erhalte ich alle Elemente mit Klassentest (dh) sowohl ausgeblendet als auch angezeigt … aber es muss nur eines angezeigt und nicht ausgeblendet werden … wie kann ich das filtern und in dieser Zeile selbst abrufen?????

$('.element').find('.test').each(function(index, loopelement) {

 }

  • Es ist wirklich die Stunde wert (oder zwei, max), die es braucht, um das durchzulesen jQuery-API-Dokumentation Anfang bis Ende. Sie werden alle möglichen Dinge finden, von denen Sie nichts wussten (einschließlich der :visible Selektor Rory hat darauf hingewiesen).

    – TJ Crowder

    19. Dezember 2012 um 10:01


Benutzen Sie die :visible Wähler:

$('.element').find('.test:visible').each(function(index, loopelement) {
    // do stuff...
});

  • @RoryMcCrossan, aber die Frage war „…sowohl versteckt als auch angezeigt…“. Ich meine, ich streite nicht über die Dokumente. Ich habe sie gelesen und mache deshalb diesen Kommentar, da diese Lösung „nicht genau die Antwort auf die Frage“ ist.

    – Herr P

    28. September 2015 um 7:17 Uhr


  • @Pisek Ich bin mir nicht sicher, was du meinst. Das OP sagt, dass er derzeit alle Elemente (sowohl ausgeblendete als auch angezeigte) abruft und dieses Verhalten ändern möchte, sodass der Selektor nur die angezeigten Elemente zurückgibt – und das ist genau das, was meine Antwort bewirkt.

    – Rory McCrossan

    5. Februar 2016 um 9:59


  • @RoryMcCrossan, der Titel dieser Ausgabe lautet Get only the elements which are not hidden.. Jquery. Und in jQuery-Dokumenten für :sichtbar: Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout.. Also, wie ich bereits sagte: Ihre Antwort ist nicht korrekt … Sie werden Elemente auswählen, die es sind sichtbar oder versteckt. Sie werden nur weglassen Anzeige: keine Elemente.

    – Herr P

    8. Februar 2016 um 9:08

  • @RoryMcCrossan, tut mir leid, aber nein;) Deine Antwort ist einfach falsch. Wieder war die Frage …muss aber nur angezeigt und nicht ausgeblendet werden…. Ihr Code funktioniert nicht für versteckte Elemente! Es geht nicht um Semantik – versteckt ist versteckt, nicht angezeigt ist nicht angezeigt. Seien Sie dabei streng. Ihr Code funktioniert nur für nicht angezeigte Elemente. Kumpel, ich habe dir gerade den Fehler gezeigt, den du gemacht hast. Wenn Sie das Problem beheben möchten, tun Sie es auf die von Ihnen gewünschte Weise. Ich bin gerade hierher gekommen, um die Antwort auf eine Frage zu finden, und es tut mir leid, aber die Antwort ist falsch.

    – Herr P

    8. Februar 2016 um 9:34


Brunos Benutzeravatar
Bruno

Sie können verwenden jQuerys :visible Wähler.

var $visibles = $(".element").find(".test:visible");

Aber seien Sie sich bewusst, wie jQuery funktioniert. Aus der jQuery-Dokumentation:

Elemente gelten als sichtbar, wenn sie Platz im Dokument beanspruchen. Sichtbare Elemente haben eine Breite oder Höhe, die größer als Null ist.

Elemente mit Visibility: Hidden oder Opacity: 0 gelten als sichtbar, da sie immer noch Platz im Layout beanspruchen.

Falls dieses Verhalten nicht zu Ihrem Anwendungsfall passt, können Sie jQuery erweitern und Ihren eigenen benutzerdefinierten Selektor erstellen:

$.expr[":"].reallyVisible =
    function reallyVisible (elem) {
        if (elem == null || elem.tagName == null) {
            return false;
        }

        if (elem.tagName.toLowerCase() === "script" || elem.tagName.toLowerCase() === "input" && elem.type === "hidden") {
            return false;
        }

        do {
            if (!isVisible(elem)) {
                return false;
            }

            elem = elem.parentNode;
        } while (elem != null && elem.tagName.toLowerCase() !== "html");

        return true;
    };

function isVisible (elem) {
    var style = elem.style;

    // Depending on your use case
    // you could check the height/width, or if it's in the viewport...
    return !(style.display === "none" || style.opacity === "0" || style.visibility === "hidden");
}

Er kann wie jeder andere integrierte Selektor verwendet werden:

$(".element").find(".test:reallyVisible");
$(".element").find(".test:first").is(":reallyVisible");

1451950cookie-checkRufen Sie nur die Elemente ab, die nicht ausgeblendet sind. Jquery

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy