Question

上下文：

我有一份清单。使用jQuery，我是动态的......

...隐藏/显示某些列表项。
...计算要应用特定类的第三个和第四个列表项。

问题：

使用第n个子选择器的CSS样式（来自样式表）正在应用于每个第三个列表项。问题是当我动态隐藏/显示列表项时，CSS nth-child选择器似乎没有重新计算。

由于jQuery已经在计算第三个列表项，我不需要重新计算CSS nth-child选择器，除非没有办法取消它或销毁它。

代码：

加价：

<ul class="teamlist">
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
</ul>

jQuery：

$('.teamlist li:visible').each(function (i) {
    if (i % 3 == 0) $(this).addClass('teamlist_fourth_item');
});
$('.teamlist li:visible').each(function (i) {
   if ((i+1) % 3 == 0) $(this).addClass('teamlist_third_item');
});

不受欢迎的CSS：

.teamlist li:nth-child(3n+3) {
    margin-right: 0;
}

问题：

如何销毁或强制重新计算CSS nth-child选择器？

Answer 1

在评论之后，我认为您需要的是覆盖该类以使其与所有li元素的属性相等，您可以使自己的类与这些元素匹配，具有更高的特异性，例如，使用父级ul的id或class：

#parent .teamlist li:nth-child(3n+3) {
    margin-right:2%;
}

或ul

上有ID

<ul class="teamlist" id="lista">

#lista.teamlist li:nth-child(3n+3) {
    margin-right:2%;
}

_{还要确保在另一个}

之后加载CSS

其他方式您也可以使用Jquery并使用相同的CSS选择器修改它：

$('.teamlist li:nth-child(3n+3)').css('margin-right','2%');

销毁或重新计算CSS nth-child选择器

1 个答案: