Sé que no puedo hacer esto con CSS pero me pregunto, con jQuery, si es posible apuntar a cada enésima iteración de un elemento que tiene una clase específica. Entonces, si quisiera seleccionar cada cuarto elemento .media o cada tercer elemento .media .
Por ejemplo:
<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"); });Sí, puede usar filter() para esto y verificar el índice de elementos usando % . Como i comienza desde 0, puede usar 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>Utilice el método filter() para filtrar según el índice.
$('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>Prueba esto:
var i = 0; $('.media').each(function() { i++; if (i%4==0) { $(this).addClass("fourth"); } });