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 ?

Tagged with:  

10 Responses to Using jQuery to change part of the className attribute

  1. @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.

  2. 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>

  3. 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!)

  4. Anuj Gakhar says:

    @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.

  5. Rachel Lehman says:

    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.

  6. Anuj Gakhar says:

    @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.

  7. ilanlar says:

    thanks, but did not help me

  8. Satya says:

    looks good , but not working with many div’s with same id’s .

  9. biswajit says:

    Ideas are great …

Leave a Reply to biswajit Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2011 Anuj Gakhar
%d bloggers like this: