And gmail borked the sample page link :/ http://www.tfuture.org/julian/classname.html
2009/3/27 Julian Aubourg <[email protected]> > So, I talked about making a plugin I would be the only one to use, didn't > I? ;) > http://www.tfuture.org/julian/jquery.classname.js > > The test page is here: > http://www.tfuture.org/julian/classname.html<http://www.tfuture.org/julian/jquery.classname.js> > > (I borrowed a piece of internet from a friend) > > The plugin replaces jQuery.className and .hasClass(), .addClass(), > .removeClass(). It also adds .replaceClass(). The thing is, it enables > regexps so you can do something like .removeClass(/color\-.*/) and it will > work. I'm currently thinking about re-implementing .toggleClass() using the > same implementation trick. > > So anyway, what is the trick? > > Rather than splitting the classNames given AND the element.className, I > transform the classNames into a single regular expression that's > matched/used onto element.className. The beauty of it is, using this > technique I can take regexps or strings as classNames, it just works. Also, > the regexp is computed only once per call to every xxxClass() method but > that's a trick that could be applied onto the current implementation. > > Now my real problem is that I try & get timings comparisons and I can't get > it right. Results change given the order in which you do the tests Oo. I > probably made a huge mistake in the way I handled my timers but it's like > 4am and an half here in Paris and my eyes just refuse to find the problem > (ANY HELP IS WELCOME ;) ). > > Sad about the timer thingy because at first glance it seemed to be a 20% > performance gain on a single node. I'm pretty confident that the new > implementations are at least on par with current ones (save from hasClass, > given it uses .is() actually) but I'd like to be sure. > > -- Julian > > 2009/3/26 Julian Aubourg <[email protected]> > > > >> $(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 <[email protected]> >> >> >>> 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 [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en -~----------~----~----~----~------~----~------~--~---
