4

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

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

我想给每 7 篇文章一个类序列（'medium','small','large','large','small','small','medium'）

<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 篇博客时，一切都从头开始。这甚至可能吗？

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

4

5 回答 5

4

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

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

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

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

于 2012-11-19T17:06:14.893 回答
3

我建议使用CSS3 选择器——我知道它被标记为 JavaScript，但你已经在使用 HTML5，所以你也可以。老实说，与编写纯 JS 或 JQuery 函数相比，它会为您节省大量时间：任何时候您都可以摆脱不使用 JavaScript 的困扰。无论如何，在这里查看选择器

这将一组中的第一个节点的类，然后是第 8 个，然后是第 15 个等更改为中后，并以相同的方式继续，但对于后小的第 2、第 9 等，依此类推。

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

ul li:nth-child(2n+7) {  
  class: "post small";
}
于 2012-11-19T17:04:44.907 回答
2

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

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

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

于 2012-11-19T17:05:59.187 回答
2 
var klasses = ['medium','small','large','large','small','small','medium'];

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

这将遍历您的帖子，使用index变量 to pull from klasses，这是您的类的数组。当它到达klasses阵列的“末端”时，它会重新开始，这要归功于%操作员。

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

于 2012-11-19T17:06:17.503 回答
0

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

于 2012-11-19T17:03:26.330 回答