使用jquery为每7个元素添加不同的类
使用jquery为每7个元素添加不同的类
提问于 2012-11-20 01:00:41
我正在创建一个带有帖子列表的博客页面。每篇博客文章都有相同的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号博客时，一切都从头开始了。这有可能吗？
任何指向正确方向的观点都将非常受欢迎！
回答 5
Stack Overflow用户
回答已采纳
发布于 2012-11-20 01:06:15
您可以使用addClass并检查其索引：
var classNames = ['medium','small','large','large','small','small','medium'];
$('article.post').addClass(function(i){
return classNames[ i % classNames.length ];
});演示：http://jsfiddle.net/wgdv4/
Stack Overflow用户
发布于 2012-11-20 01:04:45
我推荐使用CSS3 selectors -我知道它被标记为JavaScript，但是你已经在使用HTML5了，所以你也可以这样做。老实说，与编写纯JS或JQuery函数相比，它将为您节省大量时间:任何时候您都可以不使用JavaScript。无论如何，请查看选择器here
这会将集合中第一个节点的类更改为post medium，然后是第8个、第15个节点等，并以相同的方式继续，但对于post small，第2个节点、第9个节点等等。
ul li:nth-child(1n+7) {
class: "post medium";
}
ul li:nth-child(2n+7) {
class: "post small";
}Stack Overflow用户
发布于 2012-11-20 01:05:59
使用jQuery可以通过以下方式完成此操作：
var classes = ["medium", "small", "large", "large", "small", "small", "medium"];
$(".post").each(function(i) {
$(this).addClass(classes[i % classes.length]);
});演示： http://jsfiddle.net/DCYjF/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13458598
复制相关文章
相似问题
腾讯云开发者
