How to move CSS classes to the right html elements

Question

I trying out some stuff with XSLT and XSLTForms and I get into a peculiar problem. I want to add style to some xforms:trigger but the XForms implementation (XSLTForms) that I use transforms the following simple xforms code into these html elements:

<span id="multiplication" class="btn btn-warning xforms-control xforms-trigger xforms-appearance-minimal">
    <span class="value">
        <button type="button">
            <span id="xsltforms-mainform-label-2_8_6_2_4_3_" class="xforms-label">*</span>
        </button>
    </span>
</span>

And here is the actual XForms code.

<xf:trigger class="btn btn-warning" id="division">
   <xf:label>/</xf:label>
</xf:trigger>

So, when it gets transformed into html elements, the structure is

|_span
  |_span
     |_button
       |_span (for the label)

So, I want this button to be styled by twitter's bootstrap with css rules for btn-warning. But in the final html, the css class class="btn btn-warning" is inserted into the first span element, which contains a button element. So I get sort of two buttons - inside one another ...

Ideally I would like to move the class="btn btn-warning" from the <span> element to the element, where it should actually belong. What is the best way to achieve that with let's say jQuery?

So the desired result should be:

<span id="multiplication" class="xforms-control xforms-trigger xforms-appearance-minimal">
    <span class="value">
        <button type="button" class="btn btn-warning">
            <span id="xsltforms-mainform-label-2_8_6_2_4_3_" class="xforms-label">*</span>
        </button>
    </span>
</span>

Answer 1

With jQuery it's simple:

$(function () {
    $("span.btn").each(function () {
        var cssClasses = this.className.split(" "), i;

        for (i = 0; i < cssClasses.length; i++) {
            // remove any class that does not start with "btn" from the array
            if (cssClasses[i].indexOf("btn") === -1) {
                cssClasses.splice(i, 1);
            }
        }
        cssClasses = cssClasses.join(" ");

        // transfer remaining classes from this to the inner <button>
        $(this)
            .removeClass(cssClasses)
            .find("button").addClass(cssClasses);
    });
});