限制：nth-​​child结果为可见元素

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

有没有办法在一个选择器中做我想要的？或者我是否必须使用.selector遍历所有each元素并手动过滤它们？

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索引的。所以：奇数选择元素1,3,5等。这是页面上的第2，第4，第6个元素。并且：奇数：奇数选择页面上的每个第4个元素。同样，：gt（3）选择索引为4或更多的所有元素，这是第5个元素以及更远的元素。

有关jsfiddle的信息，请参阅here，我认为这可以证明您的目标。注意传递的隐藏div。

Answer 2

在应用你的：nth-​​child选择器之前，你可以.find（）在可见元素上吗？也许像是

$overlay.find("> :visible").find('.container .content .selector').not(':nth-child(4n)')...