jquery nième enfant qui est actuellement visible

Question

je peux le style de tous les 4 « article » div comme si

jQuery(".item:nth-child(4n)").addClass("fourth-item"); 

et qui fonctionne très bien, mais je cache certains éléments, montrer d'autres et que vous souhaitez re-faire style, mais seulement le style tous les 4ème élément qui est visible. J'ai donc une fonction qui va supprimer ce style et le réappliquer, mais je dois spécifier dans la réapplication du style que ce n'est que tous les 4 objets visibles, pas tous les 4 objets. Je connais le sélecteur ": visible" mais je ne vois pas comment l'enchaîner avec le sélecteur nth-child correctement, des idées?

J'ai essayé différentes choses comme ça en vain ...

jQuery(".item").removeClass("fourth-item"); 
jQuery(".item:visible:nth-child(4n)").addClass("fourth-item"); 

Answer 1

:nth-child scanne les enfants du parent quel que soit leur style est. Le comptage dans :nth-child est relatif à l'élément parent, pas au sélecteur précédent. Ceci est expliqué dans la documentation jQuery pour :nth-child:

Avec :nth-child(n), tous les enfants sont comptés, peu importe ce qu'ils sont, et l'élément spécifié est sélectionné uniquement si elle correspond le sélecteur attaché à la pseudo-classe.

En utilisant une méthode plus simple avec each fait exactement ce que vous voulez:

$('#test li:visible').each(function (i) { 
    if (i % 4 == 0) $(this).addClass('fourth-item'); 
});