Question

I need to add classes to li items in a ul #colorlist at specific places. So every 15th li item becomes one class, every 16th becomes another (the 15th needs a rollover to flip around and the 16th is the first of a row). This is easy enough with this:

    $('#colorlist li:nth-child(15n+1)' ).addClass('first-column');

However I then have various filters which hide li items and the problem then comes in that the hidden ones are still counted. I think something like this might be the right approach but lots here I’m not sure about. The idea here would be to test if the total number divided by 15 equals a whole number. If it does I’d apply my class.

   $("#colorlist li").each(function(){
   if($("#colorlist li:visible").size() % 15 == ???)$(this).addClass('first-column');
   });

Not sure how you test for a whole number, or how you would use it for every 15th item. As you can see I’m sort of lost! Any help much appreciated.

Answer 1

I think you might want:

$("#colorlist li:visible")
  .filter(function(i){ return i % 15 === 0;})
  .addClass('first-column');

This will compute the position only taking the visible elements into account.

DEMO