jquery - CSS-将类添加到3n + 4“可见”列表项

我试图将一个类应用于从第4个（3n + 4）开始的每三个列表项。
当所有列表项均可见时，使用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');

最佳答案

环：

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

关于jquery - CSS-将类添加到3n + 4“可见”列表项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20247750/