我想从所有标签的类属性中删除以“蓝色”结尾的类
示例 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" />
这将为我提供以“蓝色”结尾的类的所有元素
$('[class$=blue]');
如何从类属性中弹出这些匹配的类名?
我想从所有标签的类属性中删除以“蓝色”结尾的类
示例 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" />
这将为我提供以“蓝色”结尾的类的所有元素
$('[class$=blue]');
如何从类属性中弹出这些匹配的类名?
您可以使用如下正则表达式提取整个类名:
$('[class$="blue"]').each(function() {
var clsName = this.className.match(/\w*blue\w*/)[0];
});
您应该意识到的一件事是$('[class$="blue"]')
对名为 的整个属性进行操作class
。我不对单个类名进行操作。因此,它将匹配:
class="happy text_blue"
但是,它将不匹配:
class="text_blue happy"
因为 class 属性不以 . 结尾"blue"
。如果您希望它获取任何包含的类名,"blue"
无论它在类名属性中的位置如何,您都必须使用:
$('[class*="blue"]').each(function() {
var clsName = this.className.match(/\w*blue\w*/)[0];
});
如果您还想过滤掉不以蓝色结尾的类名,您可以使用 JS 执行此操作,如下所示:
$('[class*="blue"]').each(function() {
var match = this.className.match(/\w*blue(\b|$)/);
if (match) {
var clsName = match[0];
}
});
如果你想从对象中删除这些类名,你可以这样做:
$('[class*="blue"]').each(function() {
var match = this.className.match(/\w*blue(\b|$)/);
if (match) {
$(this).removeClass(match[0]);
}
});
也可以这样做,这看起来更干净一些,但它并不能完美地清理它正在删除的类名周围的额外空格:
$('[class*="blue"]').each(function() {
this.className = this.className.replace(/\w*blue(\b|$)/, "").replace(/\s+/g, ' ');
});
如果您要经常这样做,您可能想要更改分配课程的方式。您可以像这样制作 HTML:
<p class="text blue happy">this is blue text</p>
然后不要.text_blue
在 CSS 中使用选择器,.text.blue
而是使用。然后你可以简单地从类中删除“蓝色”。