jQuery nth-child 相對於前一個選擇器

Question

我正在嘗試做一些分頁，下面的代碼為每個 div 分配一個類，說明它應該在哪個頁面上：

        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 個子元素？ 即如果我有：

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