Wie formatiere ich Zeilen mit Selektoren für das n-te Kind richtig, wenn ausgeblendete Elemente vorhanden sind?

So umgehen Sie ausgeblendete Elemente bei der Verwendung von Selektoren für das n-te Kind

Mit dem Selektor für das n-te Kind können Sie Elemente basierend auf ihrer Position untereinander gezielt auswählen ihre Geschwisterelemente. Allerdings zählt dieser Selektor versteckte Elemente, was zu Problemen führen kann, wenn bestimmte Zeilen in einem Raster unterschiedlich angezeigt werden sollen.

In Ihrem Fall verwenden Sie Selektoren für das n-te Kind, um das Erscheinungsbild jeder n-ten Zeile zu ändern in einem Blockgitter. Wenn Sie einige Blöcke mit display: none ausblenden, zählt der n-te-Kind-Selektor sie immer noch, was zu einem falschen Stil führt.

CSS-basierte Lösung

Leider gibt es keine reine CSS-Lösung für dieses Problem. Der Selektor für das n-te Kind betrachtet einfach alle Geschwister, unabhängig von ihrer Sichtbarkeit.

jQuery-basierte Lösung

Um zu vermeiden, dass versteckte Elemente in Ihre Berechnungen für das n-te Kind einbezogen werden, Sie müssen sie aus dem DOM entfernen, wenn sie ausgeblendet sind. jQuery bietet zu diesem Zweck eine .detach()-Methode:

$(".hide-others").click(function () {
  var divs;

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

  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();
  }
});

Dieser Code entfernt die ausgeblendeten Elemente aus dem DOM, wenn auf die Schaltfläche „Andere ausblenden“ geklickt wird. Wenn Sie erneut auf die Schaltfläche klicken, werden die Elemente erneut in das DOM eingefügt und behalten ihre ursprüngliche Reihenfolge bei.

Demo

Hier ist eine Demo, die die Lösung demonstriert:

[DEMO FIDDLE]

Mit der Methode .detach() ist das möglich Schalten Sie die Sichtbarkeit von Elementen um, ohne die Selektorlogik des n-ten untergeordneten Elements zu unterbrechen, und stellen Sie so sicher, dass jede Zeile in Ihrem Raster ihr gewünschtes Erscheinungsbild beibehält.

Das obige ist der detaillierte Inhalt vonWie formatiere ich Zeilen mit Selektoren für das n-te Kind richtig, wenn ausgeblendete Elemente vorhanden sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!