Style table cells using jQuery

Question

I'm trying to style table cells within a table based upon whether or not the contain the character | in the url or not (don't ask, dealing with SharePoint).

Sample HTML;

<table>
<tr>
<td class="ms-cal-workitem">
<table>
<tr>
<td class="ms-cal-monthitem">
<a href="http://localhost:4657/1"&gt;Event 1</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="ms-cal-workitem">
<table>
<tr>
<td class="ms-cal-monthitem">
<a href="http://localhost:4657/1|435348578-kfsd-sdfsf-sfsf-324ewwer"&gt;Event 2</a>
</td>
</tr>
</table>
</td>
</tr>
</table>

In any table cell, with the class ms-cal-workitem, containing a hyperlink should have a background color of red. The only exception to this are any table cells, with the class ms-cal-monthitem, containing a hyperlink that have the character | in their href property.

What I've got so far;

        $(document).ready(function() {
            $("td.ms-cal-workitem:has(a[href*='|'])").css("background-color", "#ffff99");
            $("td.ms-cal-workitem:has(a:not[href*='|'])").css("background-color", "#ffcc33");
        });

Answer 1

If I might ask a silly question, why not assign classes when processing on the server side instead of doing this with jquery? It's not changing dynamically, correct?

Answer 2

This seems to work.

$(document).ready(function() {
       $("td.ms-cal-monthitem:has(a[href*='|'])").css("background-color", "#ffff99");
       $("td.ms-cal-monthitem:has(a[href]):not(:has(a[href*='|']))").css("background-color", "#ffcc33");  
});