1

我正在尝试通过 nav9 添加 nav1 及其工作，但它也在它之前添加了所有额外的类。所以第二个导航项目的类最终是“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 个类？

4

5 回答 5

4

这样做

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

。每个（）

于 2012-06-14T05:04:25.713 回答
1

尝试这个：

$("#navigation ul li").each(function(i, v){
    $(this).addClass('nav' + (i + 1))
})
于 2012-06-14T05:05:45.500 回答
0

你也可以这样做：

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));
}
于 2012-06-14T05:06:01.637 回答
0

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

不管你有多少物品，它都会按顺序添加类。

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

这是一个演示

于 2012-06-14T05:17:27.863 回答
0

无需过多地清理你的 javascript，我认为复习一下“nth-child”是什么以及它是如何使用的可能会有用。

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

在等式“2n+5”中，起点是 5，2n = {0, 2, 4, 6, 8, etc.}。因此 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

于 2012-06-14T05:19:25.320 回答