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 :-
[xhtml]
<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>
[/xhtml]
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,
[javascript]
$(document).ready(function(){
$(‘.my-tabs > a’).click(function(){
$(this).parent().find(".boxes").each(function(){
$(this).attr("class",this.className.replace(/grey/gi,’green’));
});
});
[/javascript]
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 ?
@Anuj:
This might not be possible with your current framework, but if possible I’d rework the CSS a bit and do something like:
Tab 1
And then instead of defining classes for “.grey-top-left” and “.grey-bottom-left”, you would do “.grey-box .boxes-top-left” and “.grey-box .boxes-bottom-left” and so forth.
The benefit to this is then you only need to change the one CSS class to affect all of your elements.
Apparently my code in the last post wasn’t escaped, so here it is in HTML format:
<li class=”my-tabs”>
nsbp; nsbp; nsbp; nsbp;<div class=”boxes grey-box”>
nsbp; nsbp; nsbp; nsbp; nsbp; nsbp; nsbp; nsbp;<div class=’boxes-top-left boxes blue’/>
nsbp; nsbp; nsbp; nsbp; nsbp; nsbp; nsbp; nsbp;<div class=”boxes”/>
nsbp; nsbp; nsbp; nsbp; nsbp; nsbp; nsbp; nsbp;<div class=”boxes-bottom-left boxes blue”/>
nsbp; nsbp; nsbp; nsbp;</div>
nsbp; nsbp; nsbp; nsbp;<a href=””>Tab 1</a>
</li>
One more time!
<li class=”my-tabs”>
&nsbp;&nsbp;&nsbp;&nsbp;<div class=”boxes grey-box”>
&nsbp;&nsbp;&nsbp;&nsbp;&nsbp;&nsbp;&nsbp;&nsbp;<div class=’boxes-top-left boxes blue’/>
&nsbp;&nsbp;&nsbp;&nsbp;&nsbp;&nsbp;&nsbp;&nsbp;<div class=”boxes”/>
&nsbp;&nsbp;&nsbp;&nsbp;&nsbp;&nsbp;&nsbp;&nsbp;<div class=”boxes-bottom-left boxes blue”/>
&nsbp;&nsbp;&nsbp;&nsbp;</div>
&nsbp;&nsbp;&nsbp;&nsbp;<a href=””>Tab 1</a>
</li>
(Sorry about the three posts!)
@Dan, thanks for the suggestion. I would have done so if it was applicable in the app I am working. The actual piece of code is far more complex than this block of code I posted here (just for this blog post). But I would agree that would make more sense if it was applicable.
Have you looked into jQuery’s hasClass(), addClass() and removeClass()? They all do basically what they sound like and might be useful for your situation so you don’t have to parse the classname string.
@Rachel,
I actually did look at hasClass() but because I had to change only a part of the className and not the full className, I had to use string replacement instead. Also, because I was changing more than one div’s, I had to use find() instead of hasClass(). However, I understand that it would make sense to use hasClass() if it was a different scenario than in my example abobe.
thanks, but did not help me
looks good , but not working with many div’s with same id’s .
You can’t use same id twice in a single page.
Ideas are great …