使用nth-child

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));
});

。每（）

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++
})​

这是一个演示

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个孩子