销毁或重新计算CSS nth-child选择器 [英] Destroy or recalculate CSS nth-child selector

问题描述

上下文：

我有一个列表。使用jQuery，我是动态的......

I have a list. Using jQuery, I'm dynamically...

1. ...隐藏/显示某些列表项。


2. ...计算要应用特定类的第三和第四个列表项。

问题：

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

A CSS style (from a stylesheet), using an nth-child selector, is being applied to every third list item. The problem is that when I dynamically hide/show list items, the CSS nth-child selector doesn't seem to be recalculating.

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

Since jQuery is already calculating the third list item, I don't need to recalculate the CSS nth-child selector unless there is no means of cancelling it out or destroying it.

代码：

加价：

<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选择器？

How do I destroy or force the recalculation of CSS nth-child selector?

推荐答案

之后注释我认为你需要的是覆盖该类使其与所有 li 元素的属性相等，你可以使自己的类与那些元素匹配更好特异性级别，例如父级ul的 id 或 class ：

After the comments i think what you need is to override that class to make it just equal with the properties for all li elements, you can make your own class that match those elements with a better level of specificity, for example with the id or class of the parent ul:

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

或者 ul

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

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

_{还要确保你的CSS在另一个之后加载}

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

Other way you can work with Jquery too and modify this with the same CSS selector:

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

这篇关于销毁或重新计算CSS nth-child选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！