communauté Apprendre Bibliothèque d'outils Loisirs

Français

Maison > interface Web > tutoriel CSS > Comment faire en sorte que le sélecteur de nième enfant ignore les éléments cachés dans une disposition en grille ?

Comment faire en sorte que le sélecteur de nième enfant ignore les éléments cachés dans une disposition en grille ?

DDD

Libérer： 2024-11-15 15:28:03

original

401 Les gens l'ont consulté

How to Make nth-Child Selector Ignore Hidden Elements in a Grid Layout?

Sauter les DIV cachés dans le sélecteur de nième enfant

Problème :

Lors de l'utilisation du nième -sélecteur enfant pour styliser les éléments dans une disposition en grille, les éléments cachés sont toujours comptés comme frères et sœurs, perturbant le style souhaité.

Solution CSS pure (pas possible) :

Le sélecteur de nième enfant prend en compte tous les frères et sœurs quelle que soit leur visibilité, il n'est donc pas possible d'ignorer les éléments cachés en utilisant uniquement CSS.

Solution jQuery :

Pour résoudre ce problème , nous pouvons utiliser jQuery pour supprimer les éléments cachés du DOM, les « excluant » efficacement du nombre du sélecteur de nième enfant. Voici le code modifié :

<br>var divs;</p>
<p>$('.photos-board-item').each(function(i){</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$(this).data('initial-index', i);

Copier après la connexion

});

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

Copier après la connexion

});
< ;/pre>

Explication :

Au chargement de la page, chaque élément reçoit un index initial.
Lorsque le On clique sur le bouton "Masquer les autres" :
- Si des divs cachés existent, ils sont ré-attachés à la grille.
- Si aucun divs cachés n'existe, les éléments de classe "css --all-photo" sont détachés de la grille, les excluant du DOM et du comptage des nièmes enfants.

En utilisant cette approche basée sur jQuery, le sélecteur de nièmes enfants ne compte que les frères et sœurs visibles, garantissant le style de grille souhaité, quel que soit le nombre ou le nombre de divs masqués.

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!

source：php.cn

Article précédent：Comment déclencher des animations CSS3 en forçant la redistribution du navigateur ? Article suivant：Comment obtenir « largeur : calc (100 % - 100 px) » avec jQuery pour la compatibilité entre navigateurs ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur