Comment exclure les éléments cachés des sélecteurs du nième enfant dans jQuery ?

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

Dans le scénario décrit dans la requête d'origine, où les éléments masqués causent des problèmes avec les sélecteurs de nième enfant, il existe deux approches principales pour résoudre le problème :

1. Exclure les éléments cachés du DOM

À l'aide de jQuery, vous pouvez supprimer entièrement les éléments cachés du DOM à l'aide de la méthode .remove(). Cela garantit qu'ils ne sont plus considérés comme frères et sœurs par le sélecteur de nième enfant. Toutefois, si vous souhaitez ultérieurement restaurer les éléments cachés, cette approche n'est pas adaptée.

2. Utilisez la méthode detach() de jQuery

La méthode .detach() dans jQuery détache les éléments cachés du DOM, mais contrairement à .remove(), elle conserve les données jQuery de l'élément. Cela permet aux éléments détachés d'être réinsérés ultérieurement sans perdre leurs données.

Code jQuery mis à jour :

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 parcourt les éléments .photos-board-item et attribue à chacun un attribut de données avec son index initial.
• Lorsque vous cliquez sur le bouton Masquer, il vérifie si des éléments ont été détaché. Si c'est le cas, il les réinsère dans le DOM en fonction de leur index initial.
• Si aucun élément n'a été détaché, il détache les éléments .css--all-photo et les affecte à la variable divs.

Remarque :

• Les règles CSS du nième enfant restent les mêmes.
• Les éléments masqués sont effectivement exclus du nième -processus de sélection des enfants, aboutissant à l'effet visuel souhaité.
• Les éléments détachés peuvent être réinsérés ultérieurement sans affecter la disposition visuelle.

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!