I had a situation today, where I wanted to replace part of the class of a given DOM element. To be more precise, the DOM element I was dealing with was like this :-

<li class="my-tabs">
<div class="boxes">
<div class='grey-top-left boxes blue'/>
<div class="grey boxes"/>
<div class="grey-bottom-left boxes blue"/>
</div>
<a href="">Tab 1</a>
</li>

And whenever the tab was clicked, I wanted to change all the div’s that had a class of ‘boxes’ defined in them, to change to ‘green’ . So, grey-top-left would become green-top-left and so on….

Now, what easier way to do this except jQuery ?

I came up with the following code,

$(document).ready(function(){
$('.my-tabs > a').click(function(){
$(this).parent().find(".boxes").each(function(){
$(this).attr("class",this.className.replace(/grey/gi,'green'));
});
});

I think there couldnt be an easier way of doing this! I so love jQuery :)
Anyone has any ideas if there was a better way to write this in jQuery ?