How to affect an Li with a certain class in jQuery?

I am using a jQuery gallery plugin, the thumbs are all in an unordered list and the main image is to the right in a div.

The plugin adds the class "selected" to the li whose main image is currently being shown. As soon as the plugin moves on to the next image, the selected class is removed from the li and added to the next li.

I want to affect the li that currently has the class "selected" applied to it开发者_运维问答. I can't just do this:

$('li.selected').whateverRules();

because jQuery is applying the class dynamically, the class isn't there from the document ready state hence it doesn't work.

I also can't use .live() because I have no event to attach. So how can I work with this?

How can I affect the li which currently has a class of "selected" if this class was added dynamically?

---

There is no way to bind to an event when a CSS class has been changed. Perhaps you could modify the jquery plugin to trigger an event when the selected class has been added and bind to that?

Here is a link for trigger() if you feel adventurous. trigger()

---

Depending on how intensive your calls are you could always use an interval. It's not ideal, necessarily, but may do what you need:

var selectedInterval = setInterval(function () {
  $('li.selected').whateverRules();
}, 100); // adjust timing to fit based on function complexity / timing.

I try to remember to store setInterval's return values into a variable in case they need to be cleared later. It's worth a shot, though not as clean as I'd like. If I were you I'd look into some event that fires when the gallery changes it's selection (there ought to be one, I'd imagine).

---

I guess you can attach the event to the controls of the gallery:

jQuery(function($){
    $('a.next-image').mouseup(function(){
       $('img.selected') ... // what you want.
    });
});

I guess this a bit ugly but with no source is dificult solve in a clean way.