CODEWITHSUNDEEP
jquery
Petro Popelyshko
Petro Popelyshko

Reputation: 1379

Add CSS style to every 3rd element

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?

Upvotes: 1

Views: 1303

Answers (4)

Maxim Pechenin
Maxim Pechenin

Reputation: 344

You'v got iterator in cycle, so you can do that:

$('.content .view-row').each( function(i) {
    if ((i + 2) % 3 == 0) { $(this).css('padding-left', '7px'); }
});

or use css3 selector nth-of-type:

$('.content .view-row:nth-of-type(3n-1)').css('padding-left', '7px');

Upvotes: 4

Jay Blanchard
Jay Blanchard

Reputation: 34416

Don't over complicate it - 

$('#content div:nth-child(3n-1)').addClass('foo');

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337610

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.

Upvotes: 7

Jean
Jean

Reputation: 772

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

            }
           });

Upvotes: 0

Related Questions