Comment styliser correctement les lignes avec les sélecteurs du nième enfant lorsque des éléments masqués existent ?

Comment contourner les éléments cachés lors de l'utilisation de sélecteurs de nième enfant

Le sélecteur de nième enfant vous permet de cibler des éléments en fonction de leur position parmi leurs éléments frères. Cependant, ce sélecteur compte les éléments masqués, ce qui peut poser des problèmes lorsque vous souhaitez que des lignes spécifiques d'une grille s'affichent différemment.

Dans votre cas, vous utilisez des sélecteurs de nième enfant pour modifier l'apparence de chaque nième ligne. dans une grille de blocs. Lorsque vous masquez certains blocs à l'aide de display: none, le sélecteur de nième enfant les compte toujours, ce qui entraîne un style incorrect.

Solution basée sur CSS

Malheureusement, il n'y a pas solution CSS pure à ce problème. Le sélecteur de nième enfant examine simplement tous les frères et sœurs, quelle que soit leur visibilité.

Solution basée sur jQuery

Pour éviter d'inclure des éléments cachés dans les calculs de votre nième enfant, vous devez les supprimer du DOM lorsqu'ils sont masqués. jQuery fournit une méthode .detach() à cet effet :

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

Ce code supprime les éléments cachés du DOM lorsque l'on clique sur le bouton "Masquer les autres". Lorsque vous cliquez à nouveau sur le bouton, les éléments sont réinsérés dans le DOM, en préservant leur ordre d'origine.

Démo

Voici une démo qui démontre la solution :

[DEMO FIDDLE]

En utilisant la méthode .detach(), vous pouvez basculer le visibilité des éléments sans rompre la logique du sélecteur de nième enfant, garantissant que chaque ligne de votre grille conserve l'apparence souhaitée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!