定位具有特定类的元素的每第n次迭代

Question

我知道我不能用CSS做这个,但我想知道,如果有可能定位具有特定类的元素的每个第n次迭代,使用jQuery.所以,如果我想选择每个第四个.media元素或每三个.media项目.

例如:

<ul>
  <li class="element"></li>
  <li class="element"></li>
  <li class="element media"></li>
  <li class="element media"></li>
  <li class="element"></li>
  <li class="element media"></li>
  <li class="element"></li>
  <li class="element media"></li>
</ul>

$('.layout-option--b .media').each(function() {
    $(this).filter(function(index, element) {
        return index % 4;
    }).addClass("fourth");
});

Answer 1

是的，您可以使用filter()它并使用检查元素索引%。因为i从 0 开始你可以使用i + 1.

$('li.media').filter(function(i) {
  return (i + 1) % 4 == 0
}).css('color', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="element">Li</li>
  <li class="element">Li</li>
  <li class="element media">Li</li>
  <li class="element media">Li</li>
  <li class="element">Li</li>
  <li class="element media">Li</li>
  <li class="element">Li</li>
  <li class="element media">Li</li>
</ul>