将 :nth-child 结果限制为可见元素答案

【问题标题】：Restrict :nth-child results to visible elements将 :nth-child 结果限制为可见元素
【发布时间】：2011-03-24 11:16:29
【问题描述】：

在 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 元素并在那里手动过滤它们？

【问题讨论】：

所以您要选择屏幕上除每 4 个可见元素之外的所有内容？
我还认为您应该将“第 5 个或更大元素”的选择器更改为 :gt(4)。我觉得它不那么令人困惑，应该让它与你的 :visible 选择器一起工作。
@Evil 是的。第二行应该选择除前四个之外的所有可见元素。
如果 css 规范添加了一些限制项目的方法会很酷。例如:not(#el[display:none]):nth-match(2n)，以便您获得第一个匹配项的第 n 个项目。请注意，:not() 尚未在主要浏览器中实现。
我的意思是:not(#el[display=none]):nth-match(2n)

标签： jquery jquery-selectors visibility css-selectors

【解决方案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 等。它们是页面上的第 2、4、6 个元素。并且 :odd:odd 选择页面上的每 4 个元素。同样，:gt(3) 选择索引为 4 或更大的所有元素，即第 5 个及以后的元素。

请参阅 here 以获取 jsfiddle，我认为它展示了您正在寻找的内容。注意被忽略的隐藏 div。

【讨论】：

不错！我以前从未见过:odd:odd。从您的 jsFiddle 来看，这似乎完全符合我的要求，我将在明天的工作中对其进行测试，并假设它可以正常工作并接受您的答案:)
@Aistina 现在，如果你问如何选择每 5 个元素或其他什么，除了使用循环之外，我不知道。
@Aistina 实际上，我看到 .filter() 将是您想要的其他第 n 个元素。所以 $overlay.find('> .container .content .selector:visible').filter( function (index) { return ((index+1)%4!=0);}).addClass('hasRightMargin');也可以。

【解决方案2】：

在应用 :nth-child 选择器之前，您能否在可见元素上使用 .find() ？也许像

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

【讨论】：

这已经或多或少是我在我的示例代码的第 1 行中所做的，但不起作用。