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