Question

我想从所有标签上的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属性中弹出这些匹配的类名？

Answer 1

你可以用这样的正则表达式拉出整个类名：

$('[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, ' ');
});

Answer 2

如果你要做很多事情，你可能想要改变你分配课程的方式。您可以像这样制作HTML：

<p class="text blue happy">this is blue text</p>

然后使用.text_blue而不是在CSS中使用.text.blue的选择器。然后你可以简单地从类中删除“blue”。

如何从类属性中删除与模式匹配的类，但保留其他类？

2 个答案: