CODEWITHSUNDEEP
jqueryhtml
ShibinRagh
ShibinRagh

Reputation: 6646

add nth-child class dynamicaly

Need to add class dynamically (by jQuery)

<ul>
    <li class="green">Green</li>
    <li class="red">red</li>
    <li class="black">black</li>

    <li class="">Green</li>
    <li class="">red</li>
    <li class="">black</li>

    <li class="">Green</li>
    <li class="">red</li>
    <li class="">black</li>

</ul>

my code

jQuery('ul').each(function(){
                jQuery(this).find('li:nth-child(1n)').addClass('green');
                jQuery(this).find('li:nth-child(2n)').addClass('red');
                jQuery(this).find('li:nth-child(3n)').addClass('black');
  });

I have added static class on first row(means first 3 li), Need more rows same as first row You can Use jQuery Demo here http://jsfiddle.net/WfKeY/

Upvotes: 1

Views: 758

Answers (2)

Levi
Levi

Reputation: 2113

Now that I understand the question, here is an alternative:

var $li = $('ul > li');
$li.each(function(i) {
    $(this).addClass($li.eq(i%3).attr('class'));
});

http://jsfiddle.net/zaMUU/5/

Upvotes: 1

gion_13
gion_13

Reputation: 41533

You should be repeating the classes every 3 elements, so use 3n, 3n+/-1, 3n+/-2 : 

jQuery('ul').each(function(){
    jQuery(this).find('li:nth-child(3n-2)').addClass('green');
    jQuery(this).find('li:nth-child(3n-1)').addClass('red');
    jQuery(this).find('li:nth-child(3n)').addClass('black');
});​

Updated demo : http://jsfiddle.net/WfKeY/2/

Upvotes: 3

Related Questions