使用javascript将样式应用于某些列表项

Question

I have been trying to learn JavaScript and trying to crack a JS Fiddle to try out. http://jsfiddle.net/Xy9Ga/ Objectives Using JAVASCRIPT : 1) Make every third list item red text and italic, starting with first item. 2)Make every tenth item bold and underlined, starting at fifth item.

I know to create the css classes and then apply them to the list items accordingly. I am having trouble trying to figure out the JavaScript side of things :( Not really looking for someone to code it for me but possibly explain the logic on how to do it. I don't know where to start

document.load =function() {
};

The two CSS classes I made are

    .reditem {
    color: red;
    font-style: italic;
}

.blackitem {
    font-weight: bold;
    font-style: underline;
}

Answer 1

Use the nth-child pseudo-class instead.

I updated your fiddle to show this.

Basically, the coefficient is how often it is applied, and the part added is where it starts (that's not exactly right, but it's close enough for me).

That means for every third, starting at the first, it's nth-child(3n+1) , and for every tenth, starting at the fifth, it's nth-child(10n+5) .

Here is the documentation for nth-child .

Answer 2

Created a fork of your fiddle and what I believe you're asking, take a peek if you get stuck! jsfiddle.net/realchaseadams/Xy9Ga/8

var list_items = document.getElementsByTagName('li');

for(var i = 0, len = list_items.length; i < len; i++) {
    if (i % 3 === 0) {
      list_items[i].className += ' third';   
    }
    if ((i % 10 === 0 && i !== 0) || i === 4) {
      list_items[i].className += ' fifth';   
    }
}

It looks like you're more interested in control flow & operators and adding classes that have properties defined in styles.

Answer 3

What you need to do is.

1. Create a Nodelist first with your all li elements in it.
2. Traverse the whole list and check whether the index is divisble by 3 or not.

3. When you got your element change the color of text by using css() function.

    var nodeList = $('li'); nodeList.each(function (index, val) { if ((index + 1) % 3 === 0) { $(this).css('color', 'red'); } }); 

Here is your fiddle modified