If all your class have the same prefix you could also use CSS3
selectors like " class^=color-] "
So $('class^=color-]').each(function() {
$(this).removeClass(this.className);
});
Haven't tried it and I am tried, but that "should" remove all classes
starting with color-foo, not sure if it is what you are looking for
but thought it might help :)
On Mar 26, 3:29 pm, Julian Aubourg <aubourg.jul...@gmail.com> wrote:
> > As for .replaceClass I still don't see a point. If
> > .removeClass(foo).addClass(bar); is doing bad performance things, then
> > those performance things should be fixed. I find the case to be trivial
> > in comparison to how much is already done in JS to do anything else.
>
> like I said, probably a bit nitpicking but no matter how you "fix" the
> performance issue in removeClass & addClass, chaining them for a simple
> replace is twice the work on the class attribute of the node.
>
> > $(node).removeClass('color-black color-white color-blue
>
> color-green').addClass('color-white');> I think multiple classes are
> supported in removeClass already.
>
> yes, definitely is. Though with current implentation, your example is
> equivalent to:
>
> $(node).removeClass('color-black').removeClass('color-white').removeClass('color-blue').removeClass('color-green').addClass('color-white')
>
> Oh well ;)
>
> -- Julian
>
> 2009/3/26 Daniel Friesen <nadir.seen.f...@gmail.com>
>
>
>
> > Your original example was confusing. If you just have buttons that
> > change the background colors you don't even need to bother with the filter.
>
> > $(node).removeClass('color-black color-white color-blue
> > color-green').addClass('color-white');
>
> > I think multiple classes are supported in removeClass already. But the
> > regex idea is a possibility.
>
> > As for .replaceClass I still don't see a point. If
> > .removeClass(foo).addClass(bar); is doing bad performance things, then
> > those performance things should be fixed. I find the case to be trivial
> > in comparison to how much is already done in JS to do anything else.
>
> > ~Daniel Friesen (Dantman, Nadir-Seen-Fire)
>
> > Julian Aubourg wrote:
>
> > $(node).filter('.color-black').removeClass('color-black').addClass('color-white').end()
> > > And you find that more readable than
> > > $(node).replaceClass('color-black','color-white') ? ;)
>
> > > The main issue here is that I dunno what the class will be in the first
> > > place. I just know it will be "color-XXX" but I have no idea what the XXX
> > > is. All I have are clickable elements that basically say: "set backroung
> > to
> > > red", "set background to green", etc etc. It could also be "set
> > background
> > > to image1 and font-weight to bold" or anything else, the point is I'm not
> > > supposed to know the exact changes it is supposed to do visually to the
> > > targeted element (that's the whole point: keeping the style info in the
> > css
> > > and use classes to switch the visual properties).
>
> > > So clearly, the first step is to find which of the color-XXX the element
> > is
> > > tagged with, then replace it with color-YYY as asked by the other
> > clickable
> > > element. So, yes, regexp support on hasClass / removeClass would be
> > greatly
> > > appreciated (you don't wanna know how horrible my current code is --
> > > basically relying on ids and a secondary structure to keep track of the
> > > actual color class -- hence duplicating the information).
>
> > > Now, onto the replaceClass. Well, node.removeClass(X).addClass(Y) is
> > > basically:
> > > - 1 split of X to arrayX
> > > - 1 split of Y to arrayY
> > > - (arrayX.length + arrayY.length) splits of the node's class attribute
> > > - (arrayX.length + arrayY.length) times searches in the resulting split
>
> > > On a side note, I don't even get why add and remove actually delegate to
> > > jQuery.classname.has() knowing the function does a split of the class
> > > attribute each time it is called rather then splitting the class
> > attribute
> > > themselves and be done with it once and for all. It sure saves some bytes
> > in
> > > the filesize department but it does not seem right to me from a
> > performance
> > > point of view.
>
> > > Even if removeClass and addClass only did one split of the class
> > attribute
> > > each, it would still be one split too many for a replacement.
>
> > > All I'm saying in the end is that a replaceClass() function would be
> > simpler
> > > in usage and much more efficient (depending on the performance penalty of
> > a
> > > regexped split) than chaining removeClass() and addClass().
>
> > > I guess that, today, most people do set style properties manually but
> > class
> > > switching is so much more elegant, solid (since you don't have to keep
> > track
> > > of which style properties were set previously so that you reset them
> > before
> > > applying new ones) and efficient (you only change a string portion in an
> > > attribute and you don't have to go through jQuery's style engine). I'm
> > just
> > > a bit puzzled jQuery makes it difficult by design in that it does not
> > > provide regexp support for class search and forces into an efficient
> > > solution to change a class for another.
>
> > > Probably nitpicking anyway but then again, I'm just telling because I
> > have a
> > > real-life case on the table right now ;)
>
> > > Oh well, I guess it's time to make another plugin no-one will use apart
> > from
> > > me ;)
>
> > > Thanks for the feedback, Dan,
>
> > > -- Julian
>
> > > 2009/3/26 Daniel Friesen <nadir.seen.f...@gmail.com>
>
> > >> Having .hasClass / .removeClass support regex has been discussed before,
> > >> there is a ticket open for one of them so it might be a possibility.
>
> > >> I don't see much use for replaceClass, rather I think the semantics of
> > >> reading it would be a little confusing. I can't even understand what the
> > >> code you have there is even supposed to do.
> > >> I see no reason to combine add and remove into one.
>
> > >> Just a quick tip, if you're trying to do boolean stuff:
>
> > $(node).filter('.color-black').removeClass('color-black').addClass('color-white').end()...
> > >> That there would replace color-black with color-white but only for nodes
> > >> with color-black, the .end() returns back to the original $(node) so
> > >> chaining can continue.
>
> > >> ~Daniel Friesen (Dantman, Nadir-Seen-Fire)
>
> > >> Julian Aubourg wrote:
>
> > >>> Hey all,
> > >>> I'm working on a site that offers some customizability regarding
> > elements
> > >>> colors (background & font). Rather then setting the color with .css(),
> > I
>
> > >> use
>
> > >>> classes like color-red, color-green, etc (and of course, red is not the
>
> > >> css
>
> > >>> "red" and green is not the css "green"). I find it much cleaner since
> > I
> > >>> need not have color values referenced within javascript or php (it's
>
> > >> simply
>
> > >>> in the css).
>
> > >>> However, the code seems unnecessarily bloated for switching classes.
> > What
> > >>> would be very useful imo, is to have hasClass accept regexp & return
> > the
> > >>> array of found classes and also a .replaceClass() function that would
>
> > >> change
>
> > >>> a class into another. That way I could do the following:
>
> > >>> var colorClasses = $.hasClass(/color-.+/);
> > >>> if (colorClasses!==false) {
> > >>> var currentColorClass = colorClasses[0];
> > >>> }
> > >>> // Do stuff with the color class
> > >>> $.replaceClass(currentColorClass,"color-"+newColor);
>
> > >>> As of today, I have only two solutions:
> > >>> - keep the current color using $.data() or any other custom data
>
> > >> container
>
> > >>> - OR search the class attribute by hand (hoping classes are in a
> > specific
> > >>> order, you can imagine the mess)
>
> > >>> If that wasn't bad enough, after that, to replace the class, I have to
>
> > >> call
>
> > >>> $.removeClass() and $.addClass() which seems pretty inefficient to me.
>
> > >>> I know I could probably do a plugin for that but I have the feeling
> > that,
>
> > >> if
>
> > >>> embedded in jQuery with its class related code, it would be much more
> > >>> efficient.
>
> > >>> I also know I could switch back to the .css("background-color",color)
> > but
>
> > >> it
>
> > >>> kinda defeats the purpose of having the presentation information in the
>
> > >> css
>
> > >>> and ONLY in the css which I find pretty nice for maintenance.
>
> > >>> Yes, and finally, am I crazy or couldn't this be quite useful?
>
> > >>> Take care, all,
>
> > >>> -- Julian
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery Development" group.
To post to this group, send email to jquery-dev@googlegroups.com
To unsubscribe from this group, send email to
jquery-dev+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---
