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 -~----------~----~----~----~------~----~------~--~---