Question

我正在创建一个包含帖子列表的博客页面。每篇博文都有相同的html，例如：

<article class="post">
  post 1
</article>

我想给每7篇文章一系列的课程（'中等'，'小'，'大'，'大'，'小'，'小'，'中'）

<article class="post medium">
  post 1
</article>
<article class="post small">
  post 2
</article>
<article class="post large">
  post 3
</article>
<article class="post large">
  post 4
</article>

当我发布第8号博客时，它会从头开始。这甚至可能吗？

非常欢迎任何指向正确方向的点！

Answer 1

您可以使用addClass并检查其索引：

var classNames = ['medium','small','large','large','small','small','medium'];

$('article.post').addClass(function(i){
    return classNames[ i % classNames.length ];
});

演示：http://jsfiddle.net/wgdv4/

Answer 2

我建议使用 CSS3选择器 - 我知道它是标记的JavaScript，但您已经在使用HTML5，所以您也可以。老实说，与编写纯JS或JQuery函数相比，它可以节省大量时间：任何时候你都可以逃避不使用JavaScript。无论如何，请查看选择器here

这会改变集合中第一个节点的类，然后是第8个节点，然后是第15个等等，以便发布媒体，并以相同的方式继续，但是第2个，第9个等等，以便发布小版本等等。

ul li:nth-child(1n+7) {  
  class: "post medium";
}

ul li:nth-child(2n+7) {  
  class: "post small";
}

Answer 3

使用jQuery可以通过以下方式完成：

var classes = ["medium", "small", "large", "large", "small", "small", "medium"];
$(".post").each(function(i) {
    $(this).addClass(classes[i % classes.length]);
});

DEMO： http://jsfiddle.net/DCYjF/

Answer 4

var klasses = ['medium','small','large','large','small','small','medium'];

$('article.post').each(function( index)
{
$(this).addClass( klasses[index % klasses.length] );
});

这将迭代您的帖子，使用index变量从klasses拉取，这是您的类的数组。当它到达klasses数组的“结尾”时，由于%运算符，它会重新开始。

编辑：看起来我们很多人都采用了类似的解决方案。需要注意的一点是，这个解决方案使用.length作为多少项目的指示，而不是硬编码7.我不在乎你是否接受这个答案，但我建议使用长度，这样你就可以添加/删除类而无需在其他地方更改代码。

Answer 5

查找mod运算符 - （％）。如果n可以被7清除（其中n是当前帖子的id），则执行（n％7 == 0）将返回true，您可以使用它来重置样式计数。

使用jquery为每7个元素添加不同的类

5 个答案: