jquery - 限制:nth-child results to visible elements

Question

在 jQuery 中，我想为第 5 个或更大的所有可见元素添加一个类，并为每个不是第 4 个子元素的元素添加另一个类。以前，我是这样做的:

$overlay.find('> .container .content .selector').not(':nth-child(4n)').addClass('hasRightMargin');
$overlay.find('> .container .content .selector:nth-child(n+5)').addClass('hasTopMargin');

但是，现在我正在切换第一个 .selector 的可见性，并且 :nth-child 没有考虑可见性，因此这不起作用我想要，因为它仍在计算不可见元素:

$overlay.find('> .container .content .selector:visible').not(':nth-child(4n)').addClass('hasRightMargin');
$overlay.find('> .container .content .selector:visible:nth-child(n+5)').addClass('hasTopMargin');

有没有一种方法可以在一个选择器中完成我想要的事情？或者我是否必须使用 each 循环遍历所有 .selector 元素并手动过滤它们？

Answer 1

我认为这应该可以解决问题。

$overlay.find('> .container .content .selector:visible:not(:odd:odd)').addClass('hasRightMargin');
$overlay.find('> .container .content .selector:visible:gt(3)').addClass('hasTopMargin');

您的主要问题是第 n 个子元素选择其父元素的第 n 个子元素的所有元素，而不是集合中的第 n 个元素。另外，请记住 :odd、:even、:gt、:lt 等选择器的索引为 0。因此 :odd 选择元素 1,3,5 等。分别是页面上的第二、第四、第六个元素。并且 :odd:odd 选择页面上的每 4 个元素。同样，:gt(3) 选择索引为 4 或更大的所有元素，即第 5 个及以后的元素。

参见here我认为 jsfiddle 可以展示您正在寻找的内容。请注意被忽略的隐藏 div。