背景:
我有一个列表,使用jQuery动态地隐藏和显示某些列表项,计算第三和第四个列表项以应用特定的类。 问题:
使用nth-child选择器的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选择器?
nth-child
不会对隐藏元素产生影响,因此除非您添加或删除 DOM 节点,否则 CSS 不会突然更改匹配的元素。 - zzzzBov