Comment puis-je faire en sorte que le sélecteur du nième enfant ignore les éléments cachés ?

Comment faire en sorte que le sélecteur de nième enfant ignore les éléments cachés

Problème :

En CSS , le sélecteur :nth-child() compte les éléments cachés dans ses calculs. Cela peut provoquer des perturbations lors du masquage d'éléments à l'aide de display: none.

Solution :

Pour exclure les éléments masqués, nous devons les supprimer complètement du DOM. Voici une solution basée sur CSS et une solution basée sur jQuery :

Solution CSS :

.hidden {
    display: none !important;
}

La déclaration !important remplace la règle display: none et supprime complètement l'élément de la mise en page.

Solution jQuery :

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

La méthode Remove() supprime physiquement les éléments cachés du DOM, garantissant qu'ils ne sont pas compté par le sélecteur :nth-child().

Exemple :

Considérez la structure HTML suivante :

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

Utilisation du nième- sélecteur child(2n), le deuxième élément serait ciblé. Cependant, si nous masquons le deuxième élément en utilisant display: none, il sera quand même compté par le sélecteur.

En utilisant la solution CSS ou jQuery fournie, l'élément masqué ne sera plus pris en compte par le nième élément. sélecteur child(), résultant en l'effet souhaité.

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!