Q:

Count number of list items then add style based on quantity

I want to be able to count the number of list items within a UL and then set the padding on them based on the number of li's there are.
To count the number of li's I think I need to do:
var count = $("ul.nav li").length

But can I then use some IF logic to say something like:
if count==10 then 'ul.nav li "style=padding:0 0 0 40px"'
if count==9 then 'ul.nav li "style=padding:0 0 0 50px"'
if count==8 then 'ul.nav li "style=padding:0 0 0 60px"'
etc...

I've tried this, but it doesn't seem to work. Any ideas?

A:

You can do that in a convenient way using CSS classes combined with the logic you provided.
First write a CSS class for each length you want:
.li-count-4
{
    padding: 0 0 0 40px;
    /*any other styles you want*/
}

.li-count-3
{
    padding: 0 0 0 30px;
    /*any other styles you want*/
}

Then you write the javascript part
var lis = $("ul.nav li");
var count = $("ul.nav li").length;

switch (count)
{
    case 4:
        lis.addClass('.li-count-4');
        break;
    case 3:
        lis.addClass('.li-count-3');
        break;
    //other cases
}

Good Luck.

