find element of particular class that happens before element with known ID, in jQuery

Question

I have the following piece of HTML. Using jQuery it is easy to find the element with given ID ("ctl00_JQueryContent_PhenoTree_i1_ItemLabel" in the example). My task then to alter the SPAN right before it that has class "rtUnchecked". I further need to remove rtUnchecked and replace it with other CSS class.

<span class="rtSp"></span><span class="rtPlus"></span>
<span class="rtUnchecked"></span><div class="rtIn">
            <div class="rtTemplate">
                <table> <tbody><tr><td>
 <span id="ctl00_JQueryContent_PhenoTree_i1_ItemLabel">
 (...)

I obviously can not use class sejector, because there are other SPANs of class rtUnchecked on the page. How I'd write a selector for JQuery that helps me to find this element?

Answer 1

Have you tried?

//select element
var $elem = $('#ctl00_JQueryContent_PhenoTree_i1_ItemLabel')
            .prev('span.rtUnchecked')
            .last();
//switch class
$elem.removeClass('rtUnchecked').addClass('otherClass');

Answer 2

Try this:

 $('#ctl00_JQueryContent_PhenoTree_i1_ItemLabel')
 .parents().find('.rtUnchecked').last().css({'color':'red', 'border': '1px solid red'});

demo here: http://jsfiddle.net/wCBhT/

Answer 3

you can test it also:

$('#ctl00_JQueryContent_PhenoTree_i1_ItemLabel')
 .parents().find('.rtUnchecked').removeClass('rtUnchecked').addClass('new-classname');