jQuery nth-child относительно предыдущего селектора

Question

Я пытаюсь выполнить разбиение на страницы, и следующий код назначает класс для каждого элемента div, сообщая, на какую страницу он должен go:

        var numOfPages = Math.ceil($(".mods-flex-items > div:visible").length / 20);
        console.log(numOfPages);
        $("div[class*='onpage']").removeClass("onpage-1 onpage-2 onpage-3 onpage-4 onpage-5 onpage-6 onpage-7 onpage-8 onpage-9 onpage-10");
        for (i=1; i <= numOfPages; i++) {
            for (j=1; j <= 20; j++) {
                let num = (i-1)*20+j;
                console.log(num);
                $(".mods-flex-items > div:visible:nth-child("+num+")").addClass('onpage-'+i);
            };

Однако существует проблема, связанная с тем, что он приходит в раздел :visible:nth-child в нижней строке. Из-за того, что это происходит после некоторой категоризации, я хочу применить класс onpage-X только к видимым элементам. В jQuery nth-child относится ко всем дочерним элементам, а не к предыдущему селектору, так есть ли способ сделать его n-дочерним по отношению к видимым элементам? ie если бы у меня было:

<div style="display:none"</div>
<div id='a'></div>
<div id='b'></div>

Я бы хотел, чтобы div: visible: nth-child (2) был div # b.

Спасибо!

Answer 1

Попытка объединить все в один селектор не является хорошей идеей.

В идеале вы должны использовать функцию .each ( документация ) и затем вызывать addClass для результата .find('div:visible').eq(1) для элемента из .each.

Пример:

$('.mods-flex-items').each(() => {
    $(this).find('div:visible').eq(1).addClass('xyz');
});