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

 蒯曼荷学_936 发布于 2023-02-13 13:08

内容

我有一个清单。使用jQuery,我可以动态地...

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

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

问题

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

由于jQuery已经在计算第三个列表项,因此我不需要重新计算CSS的第n个子选择器,除非没有办法取消它或将其销毁。

代码

标记:

  • Content
  • Content
  • Content
  • Content
  • Content
  • Content
  • Content
  • Content
  • Content
  • Content

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

撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有