Использование javascript для применения стилей к определенным элементам списка

Question

Я пытаюсь изучить JavaScript и попытаться взломать JS Fiddle, чтобы попробовать. http://jsfiddle.net/Xy9Ga/ Цели Использование JAVASCRIPT: 1) Сделайте каждый третий элемент списка красным и курсивом, начиная с первого элемента. 2) Сделайте каждый десятый элемент полужирным и подчеркнутым, начиная с пятого элемента.

Я знаю, чтобы создать классы css, а затем применить их к элементам списка соответственно. У меня возникают проблемы при попытке выяснить сторону JavaScript вещей :(Не очень ищет кого-то, чтобы закодировать его для меня, но, возможно, объяснить логику о том, как это сделать. Я не знаю, с чего начать

document.load =function() { 
}; 

два класс CSS, которые я сделал в

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

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

Answer 1

Создал вилку вашей скрипки и, как я полагаю, вы просите, загляните, если вы застряли! 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'; 
    } 
} 

Похоже, вы больше заинтересованы в потоке управления & операторы и добавления классов, которые имеют свойства, определенные в стилях.

Answer 2

Используйте nth-child псевдо-класс вместо этого.

Я обновляю fiddle, чтобы показать это.

В принципе, коэффициент - это то, как часто он применяется, и добавленная часть - это место, где оно начинается (это не совсем правильно, но для меня это достаточно близко).

Это означает, что каждый третий, начиная с первого, это nth-child(3n+1), и на каждую десятую, начиная с пятого, это nth-child(10n+5).

Here - это документация для nth-child.

Answer 3

Что вам нужно сделать.

1. Создайте Nodelist сначала со всеми вашими литий-элементами.
2. Проведите весь список и проверьте, делится ли индекс на 3 или нет.

3. Когда вы получили свой элемент, измените цвет текста с помощью функции css().

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

Here is your fiddle modified