jquery - 为每第三个元素添加 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");

Example fiddle

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