I want to delete the classes that end with 'blue' from the class attribute on all tags
sample html
<p class="text_blue happy">this is blue text</p>
<p class="text_red nothappy">this is red text</p>
<img class="img_blue nothappy" />
This will give me all the elements with classes that end with 'blue'
$('[class$=blue]');
how do I pop these matched classnames off of the class attribute?
You can pull the whole class name out with a regular expression like this:
$('[class$="blue"]').each(function() {
var clsName = this.className.match(/\w*blue\w*/)[0];
});
One thing that you should realize is that $('[class$="blue"]')
operates on the entire attribute named class
. I does not operate on individual class names. So, it will match:
class="happy text_blue"
But, it will not match:
class="text_blue happy"
because the class attribute does not end with "blue"
. If you want it to get any class name that contains "blue"
regardless of where it is positioned in the class name attribute, you would have to use:
$('[class*="blue"]').each(function() {
var clsName = this.className.match(/\w*blue\w*/)[0];
});
If you further wanted to filter out class names that did not end with blue, you could do that with JS like this:
$('[class*="blue"]').each(function() {
var match = this.className.match(/\w*blue(\b|$)/);
if (match) {
var clsName = match[0];
}
});
If you want to remove these class names from the objects, you could do it like this:
$('[class*="blue"]').each(function() {
var match = this.className.match(/\w*blue(\b|$)/);
if (match) {
$(this).removeClass(match[0]);
}
});
It could also be done this way which seems a little cleaner, but it doesn't perfectly clean up extra whitespace around the class name it's removing:
$('[class*="blue"]').each(function() {
this.className = this.className.replace(/\w*blue(\b|$)/, "").replace(/\s+/g, ' ');
});
If you're going to be doing this a lot, you might want to change how you assign classes. You can make your HTML like this:
<p class="text blue happy">this is blue text</p>
and then instead of using a selector of .text_blue
in your CSS, use .text.blue
instead. Then you can simply remove "blue" from the classes.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With