# Using nth-child

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?

## Answers

Do this like

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

try this:

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

you can do it like this too:

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 is for repeating the classes like nav1 on the 10th list item, nav2 on the 11th list item etc. since you are using nth-child here.

if you want it just to repeat once with nav10 on 10th element and nav11 on 11th element and so on, you can use a pattern like this:

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

You can use each function so it doesn't repeat the class again and again. Declare your variable what from what number you want to start your class eg i=1 apply classes like nav1, nav 2...

Doesn't matter how many items you have there, it keeps adding class in order.

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

Without getting too much into cleaning up your javascript, I think a refresher on what "nth-child" is and how it's used might be useful.

In the equation "n+5" the "5" is the starting point and the "n" is the set of all positive integers (including zero). So, the CSS rule would be applied to *every child element, starting at 5*

In the equation "2n+5", the starting point is 5, and 2n = {0, 2, 4, 6, 8, etc.}. So the CSS rule would be applied to the 5th child element (0 + 5), followed by the 7th (2 + 5), 9th (4 + 5), 11th (6 + 5), etc.

So, to fix your code, remove "n" from each of your nth-child() directives.

**Ex:**

Change

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

to

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

Read here for more detail... w3.org N-th Child