jQuery - 如果类中有特定单词，则将类转移到另一个元素？

Question

我有这个问题，我想将特定的（但不是特定的）类从元素转移到另一个元素。

this:

<span>
   <span class="THIS-something-something anotherClass"></span>
</span>

into:

<span class="THIS-something-something">
   <span class="anotherClass"></span>
</span>

基本思想是，如果您在内部跨度中编写一个具有特定单词“THIS”的类，它将被转移到外部跨度（外部跨度是用 .wrap 生成的）

带有“THIS”的类是一个具有大约20种不同变体的类（THIS-something-something、THIS-something-anything、THIS-and-that ..等等..），而“anotherClass”是完全随机的类，也可能有多个......取决于我想插入多少。

我不知道这会如何发展。我可能认为这一切都是错误的吗？

我只能将所有类复制到外部跨度，然后从内部跨度删除所有类..但这有点破坏了所有目的，因为它不会留下“anotherClass”并将其复制到外部元素。 ..

Answer 1

试试这个：

$('span > span').each(function() {
    var all = $(this).attr('class').split(' ');
    for (var i = 0; i < all.length; ++i) {
        var cls = all[i];
        if (cls.indexOf('THIS-') == 0) {
            $(this).parent().addClass(cls);
            $(this).removeClass(cls);
        }
    }
});

这个可能存在与处理顺序相关的问题，因此选择器需要一个跨度位于另一个跨度内。

Answer 2

$('span[class|="THIS"]').removeClass(function (index, class) {
    var thisclass=class.match(/THIS-[^\s]+/g).join(' ');
    $(this).parent().addClass(thisclass);
    return thisclass;
});

我现在无法测试它，但稍后我会发布一个jsFiddle。应该对正则表达式进行处理，我只是想给您一个概述。

基线是 的用法.removeClass() 带有函数和 属性包含前缀选择器[名称|=“值”]。

更新：修复了代码并添加了演示。该代码获取 span 上以 THIS- 开头的所有类名，并将它们移动到其父级（您可以在 wrap() 或摆脱我的选择器并使用你的，例如 $(myselector).wrap(mystuff).removeClass(...);)。