4

我有一个 20 多个项目的列表。背景颜色使用 :nth-child(2n+1) 选择器改变。（即偶数项黑色，奇数项白色）。当我单击一个按钮以使用 jQuery Isotope 插件过滤掉特定项目时，它会向我要过滤掉的项目添加一个 .isotope-hidden 类，这会将列表项的位置更改为 0,0 并将不透明度更改为 0。

发生这种情况时，其余项目将保留原始的黑色/白色背景颜色，现在不再按顺序排列。

有谁知道在不包含 .isotope-hidden 类的项目上使用 :nth-child(2n+1) 选择器“重绘”css的方法。

我试过了

#element tr:not(.isotope-hidden):nth-child(2n+1)

无济于事。

任何帮助，将不胜感激。谢谢你。

4

2 回答 2

4

Nth-child 在处理组的过滤选择时可能会违反直觉。

使用 .each() 来绕过它的限制：

var count = 1;
$('#element tr:not(.isotope-hidden)').each(function(){
    if ( count++ % 2 == 1 ) $(this).css('background-color','white')
})
于 2012-10-26T04:57:07.190 回答
2

CSS 选择器——尤其是伪类，尤其是伪:not()类:nth-*()家族——不能用作“过滤器”；这里有一点解释，虽然回想起来似乎有点尴尬。这是一个更好的解释。

序列中的简单选择器不会按照它们一一写入的顺序进行处理；相反，它们是元素必须匹配的一组条件才能应用样式，并且元素必须按原样匹配所有这些条件。或者除了将它们称为条件，您还可以将它们称为描述符，但是当涉及到 CSS 选择器时，我会认为“过滤器”是用词不当。

您的选择器意味着：

当且仅当它位于#element其中并且匹配所有这些条件时，才选择此元素：

  • 它是一个tr元素
  • 它没有类isotope-hidden
  • 它是其父级的第 (2n+1) 个子级

这并不意味着：

  1. 看看里面的内容#element
  2. 选择所有tr元素
  3. 过滤掉这些元素中没有类isotope-hidden的元素
  4. 将样式应用于这些过滤元素中的每 (2n+1) 个子元素

即使您可以在过滤掉样式后“重新绘制”或重新应用样式，它也不会起作用。这是因为无论一个元素是否属于isotope-hidden类（甚至它是否是一个tr！），:not(.isotope-hidden)选择器都不会改变这样一个事实，即一个元素是:nth-child(1)其父元素在 DOM 中的第一个子元素，一个元素is:nth-child(2)是其父级在 DOM 中的第二个子级，以此类推。

如果您需要顺序过滤器，您将无法使用纯 CSS 选择器执行此操作；您必须使用专为此目的而设计的jQuery 过滤器方法，将一个类添加到相应的元素中，然后您可以使用它来应用您的样式：

$('#element tr').not('.isotope-hidden').filter(':even');

顺便说一句，这也可以重写为单个 jQuery 选择器，使用它的过滤器选择器：

$('#element tr:not(.isotope-hidden):even');

但是，尽管语法相似，但真正的 CSS 选择器和 jQuery 过滤器之间存在巨大差异，此答案中对此进行了概述。

于 2012-07-27T17:19:17.280 回答