我想从所有标签上的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" />
这将为我提供所有以’blue’结尾的类的元素
$('[class$=blue]');
如何从class属性中弹出这些匹配的类名?
解决方法
您可以使用这样的正则表达式拉出整个类名:
$('[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,' '); });