Задайте каждую n-ю итерацию элемента, имеющего определенный класс

Я знаю, что не могу сделать это с помощью CSS, но мне интересно, с jQuery, если можно настроить таргетинг на каждую n-ю итерацию элемента, имеющего определенный класс. Поэтому, если бы я хотел выбрать каждый четвертый элемент .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");
});

Ответ 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>

Ответ 2

Используйте filter() метод для фильтрации по индексу.

$('ul .media').filter(function(i) {
  return (i + 1) % 4 == 0;
}).addClass('class')

.class {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
  <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>

Ответ 3

Попробуйте следующее:

var i = 0;
$('.media').each(function() {
    i++;
    if (i%4==0) {
       $(this).addClass("fourth"); 
    }
});