如何高效删除 JavaScript 中带有特定前缀的类？-css教程-PHP中文网

如何高效删除 JavaScript 中带有特定前缀的类？

Linda Hamilton

发布： 2024-11-30 02:46:14

原创

113 人浏览过

How to Efficiently Remove Classes with a Specific Prefix in JavaScript?

管理具有特定前缀的类

在 JavaScript 中操作类可能具有挑战性，尤其是在处理属于具有唯一前缀的不同组的多个类时。本文探讨了一个常见问题：从 DIV 元素中删除具有特定前缀的类并将其替换为新的类。

问题

假设您有一个 DIV ID 为“a”的元素可以具有来自不同组的多个类。每个组都有一个特定的前缀。但是，在 JavaScript 代码中，您可能不知道当前将特定组中的哪个类分配给 DIV 元素。您的目标是删除所有带有“bg”等前缀的类并添加一个新类。以下代码片段说明了该问题：

$("#a").removeClass("bg*");

登录后复制

但是，此代码无法按预期工作。

解决方案

更强大的方法就是使用正则表达式，在单词边界上分割类名，并过滤掉没有指定前缀的类。下面是一个示例：

var prefix = "bg";
var classes = el.className.split(" ").filter(function(c) {
    return c.lastIndexOf(prefix, 0) !== 0;
});
el.className = classes.join(" ").trim();

登录后复制

或者，您可以创建一个 jQuery mixin 来简化此过程：

$.fn.removeClassPrefix = function(prefix) {
    this.each(function(i, el) {
        var classes = el.className.split(" ").filter(function(c) {
            return c.lastIndexOf(prefix, 0) !== 0;
        });
        el.className = $.trim(classes.join(" "));
    });
    return this;
};

登录后复制

要使用此 mixin，只需在 DIV 上调用removeClassPrefix() 函数即可元素，指定要删除的前缀：

$("#a").removeClassPrefix("bg");

登录后复制

ES6更新（2018）

在现代 JavaScript（ES6 及更高版本）中，您可以使用更简单版本的解决方案：

const prefix = "bg";
const classes = el.className.split(" ").filter(c => !c.startsWith(prefix));
el.className = classes.join(" ").trim();

登录后复制

此代码利用箭头函数和startsWith( ) 方法来有效过滤掉具有指定前缀的类。

以上是如何高效删除 JavaScript 中带有特定前缀的类？的详细内容。更多信息请关注PHP中文网其他相关文章！