Question

I have HTML like this:

<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>

I need to add a CSS style to rows – 2, 5, 8, 11, 14 and so on. There may be a lot of .view-row-number elements, 40 for example.

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

What is the best method of achieving this?

Answer 1

You want to use the nth-child selector like this:

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

Example fiddle

You can then put the required styling in the CSS class to maintain a good separation of concerns.