How do I change the background of an A-element with jQuery?

Question

I have the following html markup:

<table class="rwTitlebarControls" cellspacing="0" cellpadding="0" align="left">
    <tbody>
        <tr>
            <td style="width: 16px;">
                <a class="rwIcon" style="background: transparent url(Images/ic_icon_16.png) no-repeat scroll 0px 0px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"/>
            </td>
            <td>
                <em unselectable="on">Title</em>
            </td>
            <td nowrap="" style="white-space: nowrap;">
            </td>
       </tr>
    </tbody>
</table>

I want to change the image url of the <a>-element with the class rwIcon using jQuery, but I can't seem to find the .rwIcon.

I can find the containing table without problem using:

$('table.rwTitlebarControls');

but both the following selections fail to return the element I need

$('a.rwIcon')

$('.rwIcon')

What am I doing wrong?

NOTE: This HTML is auto-generated by Telerik's RadComponents and is not something I can change or control, so please just try to answer the question and refrain from commenting on the quality of the markup. Thanks!

Answer 1

This does work:

$('.rwIcon')

But the a tag with that class is empty (i.e. it has no content)

This works:

<a class="rwIcon" style="background: transparent url(Images/ic_icon_16.png) no-repeat scroll 0px 0px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">SOME CONTENT</a>

With this script:

$(".rwIcon").css({backgroundColor:"#000000"});

Answer 2

Turns out I hade the correct element, I just didn't identify it as such. The following script changes the background image of the a-tag:

function ChangeWindowIcon(icon) {
    icon = 'url(Images/ic_' + icon + '_16.png)';
    $('a.rwIcon').css({ 'background-image': icon });
}