jQuery niño enésima que es actualmente visible

Question

puedo estilo de cada 'elemento' cuarto div igual que

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

y que funciona bien, pero luego ocultar algunos elementos, mostrar algunos otros y quieren volver a hacerlo estilo, pero solo el estilo de cada 4to elemento que es visible. Así que tengo una función que eliminará este estilo y volverá a aplicarlo, pero debo especificar en la nueva aplicación del estilo que es solo cada 4º elemento visible, no cada 4º elemento. Conozco el selector ": visible" pero no puedo verlo para encadenarlo con el selector nth-child correctamente, ¿alguna idea?

He intentado varias cosas como esta fue en vano ...

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

Answer 1

:nth-child escanea los hijos de los padres sin importar su estilo es. El recuento en :nth-child es relativo al elemento principal, no al selector anterior. Esto se explica en la documentación de jQuery para :nth-child:

Con :nth-child(n), todos los niños se cuentan, independientemente de lo que son, y se selecciona el elemento especificado solamente si coincide con el selector unido a la pseudo-clase.

Usando un método más sencillo con each hace exactamente lo que quiere:

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