jquery n-ый дочерний элемент, который в настоящее время виден

Question

Я могу оформить каждый 4-й элемент 'item' так:

  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");

Answer 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');
});