定位具有特定类的元素的每第n次迭代 [英] Target every nth iteration of an element that has specific class

问题描述

我知道我不能用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）{
返回索引％4; 
}）。addClass（fourth）; 
}）; 
  

解决方案

是的你可以使用过滤器（）为此并使用％检查元素索引。因为 i 从0开始，你可以使用 i + 1 。

< pre class =snippet-code-js lang-js prettyprint-override> $（'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>  

I know I cannot do this with CSS but I'm wondering, with jQuery, if it's possible to target every nth iteration of an element that has a specific class. So if I wanted to select every fourth .media element or every third .media item.

For example:

<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");
});

解决方案

Yes you can use filter() for this and check elements index using %. Because i starts from 0 you can use 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>

这篇关于定位具有特定类的元素的每第n次迭代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！