Question

As title says I’m trying to append a class .third to every 3rd cloned list element. I have everything working here on JSFiddle except that missing code to add a class. Here is current code:

HTML

<ul><li>some text</li></ul>

JS

$('li').live('click', function() {
    $(this).clone().appendTo('ul');
});

CSS

li:hover {
  cursor:pointer;
  text-decoration:underline;  
}

.third {
  color: #f00;
}

At a beginning there is only one list item but, for example, after I click 5 times on any list item I would like to have html that looks like this:

<ul>
  <li>some text</li>
  <li>some text</li>
  <li class="third">some text</li>
  <li>some text</li>
  <li>some text</li>
  <li class="third">some text</li>
</ul>

Any help will be appreciated. Thanks!

Answer 1

$('li').live('click', function() {
    $(this).clone().removeClass('third').appendTo('ul')
        .addClass($('ul').children().length % 3 == 0 ? 'third' : '');
});

The difference between this and the other answers is that it doesn’t re-traverse the child nodes. It applies the class to the item when added and therefore incurs less overhead (however minimal).