使用 jquery 每 3 ul 应用不同的 css 类

发布于 2024-10-08 10:38:42 字数 1566 浏览 0 评论 0原文

我有很多 li，我循环遍历它们并以 5 为一组进行包装，但我需要对每 3 组应用不同的类，所以看起来像这样

<ul class="class1"><li></li><li></li> <li></li><li></li><li></li></ul>
<ul class="class2"><li></li><li></li><li></li><li></li><li></li></ul>  
<ul class="class3"><li></li><li></li><li></li><li></li><li></li></ul>  

<ul class="class1"><li></li><li></li><li></li><li></li><li></li></ul>  
<ul class="class2"><li></li><li></li><li></li><li></li><li></li></ul>  
<ul class="class3"><li></li><li></li><li></li><li></li><li></li></ul>    

<ul class="class1"><li></li><li></li><li></li><li></li><li></li></ul>  
<ul class="class2"><li></li><li></li><li></li><li></li><li></li></ul>  
<ul class="class3"><li></li><li></li><li></li><li></li><li></li></ul>

我正在使用它对它们进行分组

var lis = $(".leftHover ul li");  
for(var i = 0; i < lis.length; i+=5) { 
  is.slice(i, i+5).wrapAll(<ul></ul>);  
}

原文

I have a lot of li's and I am looping through them and wrapping in groups of 5 but I need to apply a different class to every 3 groups so it looks like this

<ul class="class1"><li></li><li></li> <li></li><li></li><li></li></ul>
<ul class="class2"><li></li><li></li><li></li><li></li><li></li></ul>  
<ul class="class3"><li></li><li></li><li></li><li></li><li></li></ul>  

<ul class="class1"><li></li><li></li><li></li><li></li><li></li></ul>  
<ul class="class2"><li></li><li></li><li></li><li></li><li></li></ul>  
<ul class="class3"><li></li><li></li><li></li><li></li><li></li></ul>    

<ul class="class1"><li></li><li></li><li></li><li></li><li></li></ul>  
<ul class="class2"><li></li><li></li><li></li><li></li><li></li></ul>  
<ul class="class3"><li></li><li></li><li></li><li></li><li></li></ul>

I am using this to group them

var lis = $(".leftHover ul li");  
for(var i = 0; i < lis.length; i+=5) { 
  is.slice(i, i+5).wrapAll(<ul></ul>);  
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

时常饿 2024-10-15 10:38:43

每 3 个 ul 应用不同的 css 类
使用jquery

您可以使用 nth-child 选择器，例如this：

$(".leftHover ul li:nth-child(3n)").addClass('className');

这会将类添加到类 leftHover 元素下的每隔第三个

。您当然可以将 3 的参数更改为您希望满足您的要求的任何内容。

apply different css class every 3 ul
with jquery

You can use the nth-child selector like this:

$(".leftHover ul li:nth-child(3n)").addClass('className');

That will add class to every third <li> under the element with class leftHover. You can off course change the argument of 3 to whatever you wish for your requirements.

回复收藏 0 原文

尸血腥色 2024-10-15 10:38:43

你能这样做吗..

var lis = $(".leftHover ul li");  
for(var i = 0; i < lis.length; i+=5) { 
  lis.slice(i, i+5).wrapAll('<ul class="class' + (i%3) + '"></ul>');  
}

这将以相反的方式命名它们..class2，class1，class0。使它们成为class1、class2、class3。您只需将 (i%3) 更改为 (3-(i%3)) 即可。

Can you just do ..

var lis = $(".leftHover ul li");  
for(var i = 0; i < lis.length; i+=5) { 
  lis.slice(i, i+5).wrapAll('<ul class="class' + (i%3) + '"></ul>');  
}

That will name them the other way around .. class2, class1, class0. To get them as class1, class2, class3. You can just change (i%3) to (3-(i%3)).

回复收藏 0 原文

~没有更多了~