jQuery :not() with multiple class on a table row

Question

Hi folks,

So basically I use jQuery for alternating row colours by selecting all the tr tags associated with the table to be coloured and then subsequently colouring them accordingly. There are certain times where I do not want a certain tr to be coloured, however, and in those cases the alternating colourization should skip over those particular table rows. For this purpose I have a class called "rowSkip" which i apply to all rows which the colourization should be skipped over.

For months I have had this working and it works a treat... however, there has always been one problem. There are cases when I need to apply multiple classes to a table row, but also don't want it coloured. jQuery seems to have a problem with its class selector under these circumstances - either that or I'm missing something simple here...

EG:

<tr class="rowSkip"> --> works fine.

<tr class="rowSkip strong someclass1 someclass2"> --> Does not work (still gets coloured despite the presence of the "rowSkip" class)

Does anyone have any idea why this might be and how I might get around it short of grabbing the class attr in its entirety, doing a split by the space, and then iterating through it and checking for the presence of rowSkip?

Code is below:

$("Table.alternate tr:not(.rowSkip)").each(function() {
//if(!$(this).hasClass("rowSkip")) { //Also tried this, and several other renditions to no avail.

   $(this).addClass(i++ % 2 == 0 ? 'rowOff1' : 'rowOff2');
//}
});

Thanks, Mark

Answer 1

Try this:

$("Table.alternate tr:not('[class*=rowSkip]')").each

well if your class is always going to start with rowSkip then you can do this

$("Table.alternate tr:not('[class^=rowSkip]')").each //looks for class names that starts with rowSkip

Answer 2

I would recommend you look at the jQuery selector build just for this, :odd and :even. Then you have a couple ways:

$('table.alternating tr:odd td').css('background-color','#eee');

or use a class:

$('table.alternating tr:odd').addClass('odd');

and some CSS:

tr.odd td { background-color: #eee }