将类应用于每个第三个列表项

Question

我有以下脚本。目前，它选择了我列表中的第三个项目，并且没有给它任何余量。问题是它只执行一次，有没有办法让它发生在列表中的每第三个项目上？我尝试使用 .each 但无法让它成功工作。

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

Answer 1

使用 3n 的 nth-child 伪类可以做到这一点。

$( '#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'} );

输出：

< img src="https://i.sstatic.net/vx2Ct.png" alt="在此处输入图像描述">

Answer 2

使用 nth-child CSS 选择器：

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

演示（使用颜色而不是边距）：http: //jsfiddle.net/ambiguously/DRCLF/