[jquery-dev] Re: replaceClass
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
[jquery-dev] Re: replaceClass
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
[jquery-dev] Re: replaceClass
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.htmlhttp://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 aubourg.jul...@gmail.com
$(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
[jquery-dev] Re: replaceClass
And gmail borked the sample page link :/
http://www.tfuture.org/julian/classname.html
2009/3/27 Julian Aubourg aubourg.jul...@gmail.com
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.htmlhttp://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 aubourg.jul...@gmail.com
$(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
[jquery-dev] Re: replaceClass
It may seem conter-intuitive but, in the end, the less you handle within the
VM the better. Since I want to support regexps, why make some special code
with branching and javascript based handling just for simple strings.
See, your code does apply a regexp on node.className. It should also split
the classNames parameter (because you can have multiple class names) and so
apply a regexp onto it. Except you will have to loop through the resulting
array in the VM and make everything a regexp could do by hand. The string
parameter transformed to a regexp applied onto node.className does all of
this. So in the end, transforming the string into a regexp, as complicated
and stupid as it seems, means less time within the VM and more within
built-in (compiled) functions. And, of course, on top of that, I don't have
custom code just for strings but common ground for both strings regexps
which is an asset from a maintenance point of view.
I'm not saying my solution is faster but I somehow doubt it is much slower
if at all, especially given assigning node.className seems to be the
bottleneck here.
Have you tried the sample page?
2009/3/27 Daniel Friesen nadir.seen.f...@gmail.com
Transforming every simple class check into a regex? That sounds like a
horribly roundabout way to do something extremely simple.
What happened to good old classic string testing? ( + this.className
+ ).indexOf( foo );
A tiny bit of trickery, and that could be turned into a good possibility.
( + node.className.replace(/\s+/, ) + ).indexOf( + className
+ );
~Daniel Friesen (Dantman, Nadir-Seen-Fire)
Julian Aubourg wrote:
And gmail borked the sample page link :/
http://www.tfuture.org/julian/classname.html
2009/3/27 Julian Aubourg aubourg.jul...@gmail.com
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 aubourg.jul...@gmail.com
$(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
[jquery-dev] Re: replaceClass
$(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,
[jquery-dev] Re: replaceClass
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).
