Question

我正在尝试通过nav9添加nav1及其工作方式，但它也在之前添加了所有额外的类。因此，第二个Nav项的类最终为“nav1 nav2”，依此类推。我只希望第一个导航项目为“nav1”，第二个为“nav2”，第三个为“nav3”等。这就是我所拥有的：

$("#navigation ul li:nth-child(n)").addClass("nav1")
$("#navigation ul li:nth-child(n+2)").addClass("nav2")
$("#navigation ul li:nth-child(n+3)").addClass("nav3")
$("#navigation ul li:nth-child(n+4)").addClass("nav4")
$("#navigation ul li:nth-child(n+5)").addClass("nav5")
$("#navigation ul li:nth-child(n+6)").addClass("nav6")
$("#navigation ul li:nth-child(n+7)").addClass("nav7")
$("#navigation ul li:nth-child(n+8)").addClass("nav8")
$("#navigation ul li:nth-child(n+9)").addClass("nav9")

我看到它说n +＃，但是如何让它显示我想要的1个类？

Answer 1

这样做

$("#navigation ul li").each(function(i){
   $(this).addClass('nav'+(i+1));
});

.each()

Answer 2

试试这个：

$("#navigation ul li").each(function(i, v){
    $(this).addClass('nav' + (i + 1))
})

Answer 3

你也可以这样做：

var liCount = $("#navigation ul li").size();
var modConstant = 9;
for(var i=0;i<liCount;i++){
    $("#navigation ul li:eq(" + i + ")").addClass("nav" + ((i % modConstant)+1));
}

mod用于重复类似第10个列表项上的nav1，第11个列表项上的nav2等等，因为您在这里使用了nth-child。

如果你只想在第10个元素上使用nav10并在第11个元素上使用nav11重复一次，依此类推，你可以使用这样的模式：

var liCount = $("#navigation ul li").size();
for(var i=0;i<liCount;i++){
    $("#navigation ul li:eq(" + i + ")").addClass("nav" + (i+1));
}

Answer 4

您可以使用each function，因此不会一次又一次地重复该课程。声明你的变量你想要从什么数字开始你的类，例如i=1应用类如nav1，nav 2 ...

无论您拥有多少项目，它都会按顺序添加课程。

var i = 1;
$(".nav li").each(function() {
    $(this).addClass('nav' + i);
    i++
})

Here is a demo

Answer 5

如果没有过多地清理你的javascript，我想回顾一下“nth-child”是什么以及如何使用它可能会有用。

在等式“n + 5”中，“5”是起始点，“n”是所有正整数的集合（包括零）。因此，CSS规则将应用于每个子元素，从5

开始

在等式“2n + 5”中，起点为5，并且2n = {0,2,4,6,8等}。所以CSS规则将应用于第5个子元素（0 + 5），然后是第7个（2 + 5），第9个（4 + 5），第11个（6 + 5）等。

因此，要修复代码，请从每个nth-child()指令中删除“n”。

<强>实施例

更改

$("#navigation ul li:nth-child(n+6)").addClass("nav6")

到

$("#navigation ul li:nth-child(6)").addClass("nav6")

请阅读此处了解更多详情... w3.org N-th Child

使用nth-child

5 个答案: