使用掩码更改类名？（JQuery）

Question

问题涉及jQuery。

如何查找页面上所有类似于superclass-XXXXX的类，其中XXXXX是一个数字（任何整数），以更改每个这样的类为superclass-XXXXX-finished，这是最佳方法？

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

- Haradzieniec

Answer 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-<一些数字> 为 super-<相同的数字>-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结尾的类。

- Dogbert

---

看起来它可以工作。我发现的唯一问题是：super-11变成了super-11-finished（完美！），在同一个事件中过了一会儿它又变成了super-11-finished。有没有选项来防止这种情况？我相信/ super-（\ d +）/应该被更改为只找到它一次。无论如何，非常感谢！ - Haradzieniec

抱歉，我打错了：super-11 -> super-11-finished -> super-11-finished-finished -> super-11-finished-finished-finished ... - Haradzieniec

非常感谢您的帮助。我只是用 if (typeof c == 'undefined') 替换了您的 if (c == "")。在我的情况下，它没有通过这种验证方式。 非常感谢！ - Haradzieniec

Answer 2

从超类开始查找所有这些内容：

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

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

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

- dsgriffin

---

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

Answer 3

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

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

- Zoltan Toth