Nhắm mục tiêu mỗi lần lặp thứ n của một phần tử có lớp cụ thể

Question

Tôi biết tôi không thể làm điều này với CSS nhưng tôi tự hỏi, với jQuery, nếu có thể nhắm mục tiêu mỗi lần lặp thứ n của một phần tử có một lớp cụ thể. Vì vậy, nếu tôi muốn chọn mọi phần tử .media thứ tư hoặc mỗi mục thứ ba .media.

Ví dụ:

<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

Có bạn có thể sử dụng filter() cho điều này và kiểm tra các yếu tố chỉ số sử dụng %. Vì i bắt đầu từ 0, bạn có thể sử dụng 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

Sử dụng filter() phương pháp để lọc ra dựa trên các chỉ mục.

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

Hãy thử điều này:

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