为每个第3个元素添加CSS样式

Question

我有这样的HTML:

<div id="content">
    <div class="view-row view-row-1">
    <div class="view-row view-row-2">
    <div class="view-row view-row-3">
    <div class="view-row view-row-4">
    <div class="view-row view-row-5">
    <div class="view-row view-row-6">
</div>

我需要为行添加CSS样式 - 2, 5, 8, 11, 14依此类推.可能有很多.view-row-number元素,例如40.

$('.content .view-row').each( function(i) {
    if ($(this).hasClass('view-row-2') ) {
        $(this).css('padding-left', '7px');
    }
    else if($(this).hasClass(?)) {
    }
});

实现这一目标的最佳方法是什么？

Answer 1

你想像这样使用nth-child选择器:

$("#content .view-row:nth-child(3n-1)").addClass("highlight");

示例小提琴

然后,您可以将所需的样式放在CSS类中,以保持关注点的良好分离.