Jquery nth child, который в настоящее время отображается

Я могу стилизовать каждый 4-й элемент "div" так

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

и это отлично работает, но затем я скрываю некоторые элементы, показываю некоторые другие и хочу повторить этот стиль, но только стиль каждого 4-го элемента, который виден. Поэтому у меня есть функция, которая удалит этот стиль и повторно применит его, но мне нужно указать в повторном применении стиля, что это только каждый 4-й видимый элемент, а не каждый 4-й элемент. Я знаю селектор ": visible", но не вижу, как его правильно привязать с помощью селектора nth-child, любые идеи?

Я пробовал разные вещи вроде этого безрезультатно...

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

ОТВЕТЫ

Ответ 1

:nth-child сканирует детей родителя независимо от их стиля. Счёт в :nth-child относится к родительскому элементу, а не к предыдущему селектору. Это объясняется в документах jQuery для :nth-child:

С помощью :nth-child(n) учитываются все дочерние элементы, независимо от того, что они есть, и указанный элемент выбирается, только если он соответствует селектору, прикрепленному к псевдоклассу.

Используя более простой метод, each выполняет именно то, что вы хотите:

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