Question

I have this problem that i want to transfer specific ( yet not that specific ) classes from element to another.

this:

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

into:

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

Basic idea is that if you write a class in that inner span that has specific word “THIS” it would get transfered to the outer span ( the outer span is generated there with .wrap )

class with “THIS” is a class that has like.. 20 different variations ( THIS-something-something, THIS-something-anything, THIS-and-that ..and so on.. ) and “anotherClass” is totally random class and there would possibly be multiple of those as well..depending on how many i would like to insert.

I have no idea how that would go down.. Am i maybe thinking about this all wrong?

I can only make it so that all classes get copied to the outer span and then i would remove all classes from the inner span.. but that kinda defeats all purposes as it doesnt leave “anotherClass” and it copies that to the outer element…

Answer 1

Try this:

$('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);
        }
    }
});

This may have problems relating to order of processing, hence why the selector requires a span inside another span.