我想从所有标签的类属性中删除以“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" />
这将为我提供所有以“blue”结尾的类的元素
$('[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"
因为类属性不以“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, ' ');
});
关于jquery - 如何从类属性中删除与模式匹配的类,但保留其他类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9184459/