Comment exclure les éléments cachés du comptage du sélecteur CSS nième enfant ?

Comment éviter les éléments cachés dans les sélecteurs CSS nième enfant

Lors du masquage d'éléments avec affichage : aucun à l'aide de clics sur un bouton, les sélecteurs nième enfant prennent en compte à la fois les éléments visibles et masqués . Cela peut perturber les modèles de style destinés à différentes lignes.

Explication :

Le sélecteur CSS nth-child() fait correspondre les éléments en fonction de leur position parmi les frères et sœurs. Cependant, les éléments cachés restent dans le DOM même lors de l'utilisation de display: none, ce qui entraîne un comptage incorrect.

Solution :

Pour exclure les éléments cachés du nombre de nièmes enfants , vous devez les supprimer entièrement du DOM. Cependant, l'utilisation de la méthode Remove() empêche leur restauration ultérieure, ce qui interfère avec la fonctionnalité de basculement.

Approche alternative :

Utilisez plutôt la méthode detach() de jQuery, qui préserve les écouteurs d’événements et autres métadonnées. Voici comment :

var divs;

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

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

Explication :

Ce code bascule la visibilité des divs sélectionnés tout en conservant le nombre correct de nièmes enfants :

1. Stockez les divs détachés dans la variable divs.
2. Si divs n'est pas vide, il a été cliqué précédemment. Ajoutez les divs à la ligne dans leur ordre d'origine en fonction de leur attribut de données d'index initial.
3. Si divs est vide, détachez les divs spécifiés et stockez-les dans divs.

Avantages :

• Préserve la précision du nième enfant malgré les éléments.
• Permet de basculer facilement la visibilité sans perturber la conception visuelle.
• Aucune modification du HTML ou du CSS n'est requise.

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!