Wie schließe ich versteckte Elemente aus Selektoren für das n-te Kind in jQuery aus?

So ignorieren Sie ausgeblendete Elemente bei der Verwendung von n-ten untergeordneten Selektoren

In dem in der ursprünglichen Abfrage beschriebenen Szenario, in dem versteckte Elemente Probleme verursachen Bei N-ten-Kind-Selektoren gibt es zwei Hauptansätze zur Lösung des Problems:

1. Verborgene Elemente aus dem DOM ausschließen

Mit jQuery können Sie die versteckten Elemente mithilfe der Methode .remove() vollständig aus dem DOM entfernen. Dadurch wird sichergestellt, dass sie vom Selektor für das n-te Kind nicht mehr als Geschwister betrachtet werden. Wenn Sie jedoch später die verborgenen Elemente wiederherstellen möchten, ist dieser Ansatz nicht geeignet.

2. Verwenden Sie die detach()-Methode von jQuery

Die .detach()-Methode in jQuery trennt versteckte Elemente vom DOM, behält aber im Gegensatz zu .remove() die jQuery-Daten des Elements bei. Dadurch können die abgetrennten Elemente später wieder eingefügt werden, ohne dass ihre Daten verloren gehen.

Aktualisierter jQuery-Code:

var divs;

$('.photos-board-item').each(function (i) {
    $(this).data('initial-index', i);
});

$('.hide-others').on('click', function () {
    if (divs) {
        $(divs)
            .appendTo('.row')
            .each(function () {
                var oldIndex = $(this).data('initial-index');
                $('.photos-board-item').eq(oldIndex).before(this);
            });
        divs = null;
    } else {
        divs = $('.css--all-photo').detach();
    }
});

Erklärung:

• Dieser Code durchläuft die .photos-board-item-Elemente und weist jedem ein Datenattribut mit seinem Anfangsindex zu.
• Wenn auf die Schaltfläche „Ausblenden“ geklickt wird, wird geprüft, ob Elemente vorhanden sind abgetrennt worden. Wenn ja, werden sie gemäß ihrem ursprünglichen Index erneut in das DOM eingefügt.
• Wenn keine Elemente getrennt wurden, werden die .css--all-photo-Elemente getrennt und der Variable divs zugewiesen.

Hinweis:

• Die CSS-Regeln für das n-te Kind bleiben gleich.
• Die ausgeblendeten Elemente werden effektiv vom n-ten Kind ausgeschlossen -Untergeordneter Auswahlprozess, der zum gewünschten visuellen Effekt führt.
• Die abgetrennten Elemente können später wieder eingefügt werden, ohne das visuelle Layout zu beeinträchtigen.

Das obige ist der detaillierte Inhalt vonWie schließe ich versteckte Elemente aus Selektoren für das n-te Kind in jQuery aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!