css nth-child（2n + 1）在过滤掉列表项后重绘css [英] css nth-child(2n+1) repaint css after filtering out list items

问题描述

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

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

有没有人知道一个方法来使用：nth-​​child（2n + 1）选择器在不包含.isotope-hidden类的项目上重新绘制css。

我尝试了

  #element tr：not（.isotope-hidden）：nth-​​child +1）
  

无效。

解决方案

使用过滤的群组时，第N个子元素可能违反直觉。

使用.each（）来限制其限制：

  var count = 1; 
 $（'＃element tr：not（.isotope-hidden）'）。每个函数（）{
 if（count ++％2 == 1） .css（'background-color'，'white'）
}）
  

I have a list of 20+ items. The background-color changes using the :nth-child(2n+1) selector. (ie. even item black, odd item white). When I click a button to filter out specific items using the jQuery Isotope plugin it adds a .isotope-hidden class to the items I want to filter out, which changes the position of the list item to 0,0 and opacity to 0.

When this happens the remaining items are left with the original black/white background-colors, which are now no longer in order.

Does anyone know a way to "repaint' the css using the :nth-child(2n+1) selector on the items that do not contain the .isotope-hidden class.

I tried

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

with no avail.

Any help would be appreciated. Thank you.

解决方案

Nth-child can be counterintuitive when working with a filtered selection of a group.

Use .each() to get around its limitations:

var count = 1;
$('#element tr:not(.isotope-hidden)').each(function(){
    if ( count++ % 2 == 1 ) $(this).css('background-color','white')
})

这篇关于css nth-child（2n + 1）在过滤掉列表项后重绘css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！