Применение класса к каждому третьему элементу списка

Question

У меня есть следующий скрипт. На данный момент он выбирает 3-й элемент в моем списке и не оставляет его на полях. Проблема в том, что он делает это только один раз, есть ли способ, которым я могу сделать это с каждым третьим пунктом в списке? Я попытался использовать .each, но не смог заставить его работать успешно.

<script>
$(document).ready(function() {
    $("#contentlist li:eq(2)").css({marginRight: '0'});
});
</script>

Answer 1

Используйте CSS-селектор nth-child:

$("#contentlist li:nth-child(3n)").css({marginRight: '0'});

Демо (с цветами вместо полей): http://jsfiddle.net/ambiguous/DRCLF/

Answer 2

Псевдокласс nth-child, использующий 3n, может сделать это.

$( '#contentlist li:nth-child(3n)' ).css({marginRight: '0'});

Демо: http://jsfiddle.net/ThinkingStiff/gjvpR/

HTML:

<ul id="contentlist">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

Сценарий:

$( '#contentlist li:nth-child(3n)' ).css( {marginLeft: '20px'} );

Выход: