Wie kann ich dafür sorgen, dass der :nth-child-Selektor ausgeblendete Elemente ignoriert?

So veranlassen Sie den n-ten-Kind-Selektor, versteckte Elemente zu ignorieren

Problem:

In CSS :nth-child()-Selektor zählt versteckte Elemente in seinen Berechnungen. Dies kann zu Störungen beim Ausblenden von Elementen mit display: none führen.

Lösung:

Um ausgeblendete Elemente auszuschließen, müssen wir sie vollständig aus dem DOM entfernen. Hier ist eine CSS-basierte Lösung und eine jQuery-basierte Lösung:

CSS-Lösung:

.hidden {
    display: none !important;
}

Die !important-Deklaration überschreibt die display: none-Regel und entfernt sie vollständig das Element aus dem Seitenlayout.

jQuery Lösung:

$('.hidden').remove();

Die Methode „remove()“ entfernt die ausgeblendeten Elemente physisch aus dem DOM und stellt sicher, dass sie nicht vom Selektor :nth-child() gezählt werden.

Beispiel:

Betrachten Sie den folgenden HTML-Code Struktur:

<div class="container">
  <div class="item"></div>
  <div class="item hidden"></div>
  <div class="item"></div>
</div>

Mit dem nth-child(2n)-Selektor würde das zweite Element als Ziel ausgewählt. Wenn wir jedoch das zweite Element mit display: none ausblenden, wird es weiterhin vom Selektor gezählt.

Durch die Verwendung der bereitgestellten CSS- oder jQuery-Lösung würde das ausgeblendete Element vom n-ten nicht mehr berücksichtigt. child()-Selektor, was zum gewünschten Effekt führt.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass der :nth-child-Selektor ausgeblendete Elemente ignoriert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!