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>

Answer 2

使用filter()方法根据索引过滤掉。

＆＃13;

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

＆＃13;

.class {
  color: red
}

＆＃13;

<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>

＆＃13;

Answer 3

试试这个：

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

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

3 个答案: