Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jun 2005
    Posts
    153
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Convenient change class

    Hello,

    Let's say I have a <div class="main1 secondary">.

    Is there an easy way to change "main1" to "main2" and make sure it is the first class?

    I was thinking about using jquery with .removeClass and .addClass but addClass adds it to the end.

    Any help would be great!

    Thanks

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Hmmm...maybe you could just do:
    Code:
    var obj = document.getElemenetById("someID");
    obj.className = obj.className.replace( /main1/, "main2" );
    ???

    Untested. But easy to try.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    questionable (01-25-2012)

  • #3
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by questionable View Post
    Hello,

    Let's say I have a <div class="main1 secondary">.

    Is there an easy way to change "main1" to "main2" and make sure it is the first class?
    Where myDiv is a reference to the element:

    Code:
    myDiv.className = "main2 " + myDiv.className.replace( /\bmain1\b/g, '' );

  • Users who have thanked Logic Ali for this post:

    questionable (01-25-2012)

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Yeah, that's a better way...makes sure that main2 is first class mentioned.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,134
    Thanks
    12
    Thanked 332 Times in 328 Posts
    Quote Originally Posted by questionable View Post
    Hello,
    I was thinking about using jquery with .removeClass and .addClass but addClass adds it to the end.
    why does that matter?
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,485
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Quote Originally Posted by questionable View Post
    Is there an easy way to change "main1" to "main2" and make sure it is the first class?
    Replacing a class with jQuery is easy with toggleClass() but the order of the classes is of no relevance whatsoever. And if that’s the only thing you wanna do, using jQuery is the worst way because it adds a lot of overhead (much code to parse) for such a simple thing.

  • #7
    Regular Coder
    Join Date
    Mar 2006
    Posts
    725
    Thanks
    35
    Thanked 132 Times in 123 Posts
    As others have mentioned, the precedence of the classes depends on the order they are defined in the style sheets,
    not the order they are listed in the class atribute.

    Code:
    <!doctype html>
    <html lang="en">
    <head>
    <style>
    body{font-size:125%;margin:1ex 2em;}
    .noborderClass{border:none}
    .borderClass{border:solid 1px black;}
    .maybeNoBorder{border:none}
    </style>
    <meta charset= "utf-8">
    <title>Small Page</title>
    </head>
    <body>
    <h1>Small Page</h1>
    <pre>
    &lt;style>
    	.noborderclass{border:none}
    	.borderclass{border:solid 1px black;}
    	.maybeNoBorder{border:none}
    &lt;/style>
    </pre>
    <p class="borderClass noborderClass">
    class="borderclass noborderclass"<br>
    Since noborderclass is defined <strong>before</strong>
     borderclass, the rules defined in 
    borderclass are the last ones applied.</p>
    <p class="maybeNoBorder borderClass">
    class="maybeNoBorder borderclass"<br>
    maybeNoBorder is <strong>defined</strong> 
    last, it doesn't matter what order it is in the class attribute.
    </p>
    </body>
    </html>
    Last edited by mrhoo; 01-24-2012 at 02:59 PM.

  • #8
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by VIPStephan View Post
    the order of the classes is of no relevance whatsoever.
    I just assumed it was OCD.

  • #9
    Regular Coder
    Join Date
    Jun 2005
    Posts
    153
    Thanks
    26
    Thanked 0 Times in 0 Posts
    Thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •