Wie kann man dafür sorgen, dass der n-te untergeordnete Selektor versteckte Elemente in einem Rasterlayout ignoriert?

Versteckte DIVs im n-ten-Kind-Selektor überspringen

Problem:

Bei Verwendung des n-ten -Untergeordneter Selektor zum Stylen von Elementen in einem Rasterlayout, ausgeblendete Elemente werden weiterhin als Geschwister gezählt und stören das gewünschte Styling.

Reine CSS-Lösung (nicht möglich):

Der n-te-Kind-Selektor berücksichtigt alle Geschwister unabhängig von ihrer Sichtbarkeit, daher ist es nicht möglich, versteckte Elemente nur mit CSS zu ignorieren.

jQuery-Lösung:

Um dieses Problem zu lösen , können wir jQuery verwenden, um versteckte Elemente aus dem DOM zu entfernen und sie so effektiv von der Zählung des n-ten untergeordneten Selektors „auszuschließen“. Hier ist der geänderte Code:

<br>var divs;</p>
<p>$('.photos-board-item').each(function(i){</p>
<pre class="brush:php;toolbar:false">$(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();
}

});
< ;/pre>

Erklärung:

• Beim Laden der Seite erhält jedes Element einen Anfangsindex.

• Wenn die Auf die Schaltfläche „Andere ausblenden“ wird geklickt:

  • Wenn versteckte Divs vorhanden sind, werden sie wieder an das Raster angehängt.
  • Wenn keine versteckten Divs vorhanden sind, werden die Elemente mit der Klasse „css --all-photo“ werden vom Raster getrennt, wodurch sie vom DOM und der n-ten-Kind-Zählung ausgeschlossen werden.

Mit diesem jQuery-basierten Ansatz wird der n-te-Kind-Selektor verwendet Zählt nur sichtbare Geschwister und stellt so den gewünschten Rasterstil sicher, unabhängig davon, welche oder wie viele Divs ausgeblendet sind.

Das obige ist der detaillierte Inhalt vonWie kann man dafür sorgen, dass der n-te untergeordnete Selektor versteckte Elemente in einem Rasterlayout ignoriert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!