Celuj w każdą n-tą iterację elementu, który ma określoną klasę

Question

Wiem, że nie mogę tego zrobić z CSS, ale zastanawiam się, z jQuery, czy możliwe jest zaatakowanie każdej n-tej iteracji elementu, który ma określoną klasę. Więc jeśli chcę wybrać co czwarty element .media lub co trzeci element .media.

Na przykład

<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

Tak można użyć filter() do tego i sprawdzić indeks elementy używając %. Ponieważ i zaczyna się od 0, możesz użyć 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>

Answer 2

Zastosowanie filter() metody filtrowania na podstawie indeksu.

$('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>

Answer 3

Spróbuj tego:

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