jquery - CSS - 添加类到 3n+4 'visible' 列表项

Question

我正在尝试对从第 4 个 (3n+4) 开始的每 3 个列表项应用一个类。当所有列表项都可见时，使用 CSS 效果很好。

不幸的是，当某些列表项被隐藏时(显示:无)，第 n 个子选择器也适用于那些隐藏的列表项。

我需要将 CSS 仅应用于可见列表项，因此我进行了一些研究并尝试使用 jQuery 和可见选择器来获得所需的结果。这也不起作用。

请查看下面我当前的代码作为示例。

任何帮助将不胜感激。谢谢

http://codepen.io/anon/pen/xuqwf

HTML

<ul>
  <li>1</li>
  <li style="display: none;">2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li style="display: none;">6</li>
  <li>7</li>
  <li>8</li>
</ul>

CSS

ul li {
  background: yellow;
  border: 1px orange solid;
  margin: 5px;
}

ul li:nth-child(3n+4) {
  background: green;
}

.clear {
  background: red;
}

jQuery(尝试过但失败了)

$('ul li:visible:nth-child(3n+4)').addClass('clear');

Answer 1

循环:

var i = 0;
$('ul li:visible').each(function(index,el) {
 if((index+1)%(3*i+4) == 0) {
   $(this).addClass('clear');
   i++;
 }
});