Wie schließe ich versteckte Elemente von der CSS-Zählung des n-ten untergeordneten Selektors aus?

So vermeiden Sie versteckte Elemente in CSS-Selektoren für das n-te Kind

Beim Ausblenden von Elementen mit display: none mithilfe von Schaltflächenklicks berücksichtigen Selektoren für das n-te Kind sowohl sichtbare als auch ausgeblendete Elemente . Dies kann Stilmuster stören, die für verschiedene Zeilen gedacht sind.

Erklärung:

Der CSS-Selektor nth-child() gleicht Elemente basierend auf ihrer Position unter Geschwistern ab. Allerdings bleiben versteckte Elemente auch bei Verwendung von display: none im DOM erhalten, was zu einer falschen Zählung führt.

Lösung:

Um versteckte Elemente von der Zählung des n-ten Kindes auszuschließen , müssen Sie sie vollständig aus dem DOM entfernen. Die Verwendung der Methode „remove()“ verhindert jedoch deren spätere Wiederherstellung, was die Umschaltfunktion beeinträchtigt.

Alternativer Ansatz:

Verwenden Sie stattdessen die Methode detach() von jQuery, die Behält Ereignis-Listener und andere Metadaten bei. So geht's:

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 schaltet die Sichtbarkeit ausgewählter Divs um und behält gleichzeitig die korrekte Anzahl der n-ten Kinder bei:

1. Speichern Sie die getrennten Divs in der Variable divs.
2. Wenn divs nicht leer ist, wurde zuvor darauf geklickt. Hängen Sie die Divs in ihrer ursprünglichen Reihenfolge basierend auf ihrem Anfangsindex-Datenattribut wieder an die Zeile an.
3. Wenn divs leer ist, trennen Sie die angegebenen Divs und speichern Sie sie in divs.

Vorteile:

• Erhält die n-te-Kind-Genauigkeit trotz versteckter Elemente.
• Ermöglicht ein einfaches Umschalten der Sichtbarkeit, ohne das visuelle Design zu beeinträchtigen.
• Nein Änderungen an HTML oder CSS sind erforderlich.

Das obige ist der detaillierte Inhalt vonWie schließe ich versteckte Elemente von der CSS-Zählung des n-ten untergeordneten Selektors aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!