如何高效删除 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中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

在本周的平台新闻综述中,Chrome引入了一个用于加载的新属性,Web开发人员的可访问性规范以及BBC Move

Goofonts是由开发人员和设计师丈夫签名的附带项目,它们都是版式的忠实拥护者。我们一直在标记Google
