jQuery - Capturing an event: the current element has a specific class, but change every now and then

Question

I have a slider with 4 elements whose any of them has the class 'control_tab'. The active element has the class 'active'. A few seconds later, the slider moves along and the next element becomes the active one. Then it has the class 'active'; the previous element that has been previously active looses the class 'active'.

I need to know when an element becomes the active one. As soon as any element becomes the active one by being added the class 'active', the active element's index is printed out to the console.

Here is the sample code:

<div id="controls">   
  <a href="#" class="control_tab">
    <span>A</span>
  </a>
  <a href="#" class="control_tab active">
    <span>B</span>
  </a>
  <a href="#" class="control_tab">
    <span>C</span>     
  </a>
  <a href="#" class="control_tab last">
    <span>D</span>    
  </a>    
</div>

Sorry if the message is a little bit confused,I am exhausted to ponder that stuff :p

Thanks for your help.

R.

Answer 1

If you don't have control over the code that is adding/removing the active class, there's a plugin called livequery that will fire code for you when there's a DOM change that matches a selector.

http://brandonaaron.net/code/livequery/docs

$('.active').livequery(function() {
    console.log($(this).index() + ' is now active');
});

It can also fire code when an element is removed (or unmatched).

$('.active').livequery(function() {
    console.log($(this).index() + ' is now active');
}, function() {
    console.log($(this).index() + ' is no longer active');
});