Question

I’m trying to add nav1 through nav9 and its working, but its adding all the extra classes before it also. So the class for the 2nd Nav item ends up being “nav1 nav2” and so on. I just want “nav1” for the first nav item, “nav2” for the second, “nav3” for the 3rd etc. Here’s what I have:

$("#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")

I see it says n+#, but how do I get it to display just the 1 class I want?

Answer 1

Do this like

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

.each()