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

Question

上下文:

我有一个 list 。使用 jQuery，我可以动态地...

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

问题:

使用第 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 在另一个 CSS 之后加载}

您也可以使用 Jquery 并使用相同的 CSS 选择器修改它:

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