用掩码更改类名？ (jQuery)答案

【问题标题】：Change class names with a mask? (JQuery)用掩码更改类名？ (jQuery)
【发布时间】：2012-11-14 23:51:46
【问题描述】：

这个问题是关于 jQuery 的。

找到所有看起来像superclass-XXXXX 的类的最佳方法是什么，其中XXXXX 是页面上的一个数字（任何整数）以将每个此类类更改为superclass-XXXXX-finished？

例如，如果页面上有superclass-12345 和superclass-34 类，则它们变为superclass-12345-finished 和superclass-34-finished。

【问题讨论】：

标签： javascript jquery class object addclass

【解决方案1】：

这行得通：

function f() {
    $("[class]").each(function() {
        this.className = this.className.replace(/(super-\d+)(-finished)?/, function(a, b, c) {
            if (c == "") {
                return a + "-finished";
            }
            return a;
        });
    });
}


f();
f();
f();

console.log($("[class]").map(function() {
    return this.className;
}));

这会将super-<some digits> 的每次替换为super-<same digits>-finished，即使您在单个元素上有许多这样的类。

输入：

<div class="super-11"></div>
<div class="super-not-11"></div>
<div class="yes-super-111"></div>

输出：

<div class="super-11-finished"></div>
<div class="super-not-11"></div>
<div class="yes-super-111-finished"></div>

http://jsfiddle.net/9RFn4/1

编辑：更新以过滤掉以-finished 结尾的类。

【讨论】：

似乎可以。我发现的唯一问题是：super-11 变成了 super-11-finished（完美！），并且在同一事件中它变成了 super-11-finished。有什么办法可以防止这种事情发生吗？我相信 /super-(\d+)/ 应该被改变，所以它只找到一次。还是非常感谢！！！
对不起，我打错了：super-11 -> super-11-finished -> super-11-finished-finished -> super-11-finished-finished-finished ...跨度>
非常感谢您的帮助。我唯一用 if (typeof c == 'undefined') 替换了你的 if (c == "") 。在我的情况下，它没有通过这种验证方式。非常感谢！

【解决方案2】：

假设您的元素只有一个 superclass-* 类：

$('*[class^="superclass"]').prop('class', $(this).prop('class') + '-finished');

【讨论】：

【解决方案3】：

像这样找到所有以超类开头的：

$('*[class^="superclass"]')

然后将所有以超类开头的类更改为新的类名：

$('*[class^="superclass"]').attr('class', 'newClass');

【讨论】：

这不会匹配具有多个类的元素，除非 superclass-XXXXX 类是 HTML 中指定的第一个类。不确定是否需要处理具有多个类的元素，但需要考虑。