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

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

});
< ;/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!