Using jQuery set parent element css based on condition of multiple children element

Question

<tr>
    <td class="cat" CategoryId="8">NoChange*: </td>
    <td><span class="itm" CategoryId="8">A</span></td>
</tr> 
<tr>
    <td class="cat" CategoryId="9">Row should be red*: </td>
    <td></td>
</tr> 
<tr>
    <td class="cat">Comments:</td>
    <td><span class="itm"></span></td>
</tr>​

I want to set Validation for Category which does not have items in it. For category 8 it has one value associated hence there is no need to show required where as 9 does not have any item associated with it.hence its tr color should be set to red. Also comment should be ignored altogether as it is not having any categoryid as such. I m trying to set it as

$("tr.cat~tr.itm").children(":not(:has(td))").css("color","red")

Answer 1

Check jQuery validation plugin.

Answer 2

This will select :empty <td> elements that are preceded by a <td class="cat">.

Then it traverses back to the .prev() element and changes the color.

Try it out: http://jsfiddle.net/4DN6Q/1/

$("td.cat + td:empty").prev('td.cat').css("color","red");

• http://api.jquery.com/next-adjacent-selector/
• http://api.jquery.com/empty-selector/
• http://api.jquery.com/prev/

Answer 3

Thx Daniel.It worked.