jquery - how to addClass based on the content of an element?

Question

Suppose you have a table like this:

<table>
<tr>
<td>Group 1</td>
<td>some data here</td>
<td>Group 2</td>
</tr>
</table>

and you want it to be like this:

<table>
<tr>
<td class="group1">Group 1</td>
<td>some data here</td>
<td class="group2">Group 2</td>
</tr>
</table>

Both Nick Craver's and Kevin's solutions here below work nicely. Thanks guys! Why would I wnted to do such thing? To style a timetable for a non-profit organization that provides workshops.

Answer 1

I'm not sure why you'd do this (I'd stop and look at that honestly, there's probbly a better way).

You can make it generic though. For example you could pass a function to .addClass(), for example:

$("td:contains('Group ')").addClass(function() { 
  return this.innerHTML.replace("Group ", "group");
});

Answer 2

If your content will only contain 'Group X' you could just remove the spaces and convert the text to lower.

For example:

$('td').each(function() {
     var className = $(this).html().replace(' ', '').toLowerCase();
     $(this).addClass(className);
});