javascript - 如何将 CSS 类移动到正确的 html 元素

Question

我用 XSLT 和 XSLTForms 尝试了一些东西，但我遇到了一个奇怪的问题。我想给一些 xforms:trigger 添加样式但是我使用的 XForms 实现 (XSLTForms) 将以下简单的 xforms 代码转换为这些 html 元素:

<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>

这是实际的 XForms 代码。

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

所以，当它被转化为 html 元素时，结构是

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

所以，我希望这个按钮的样式由 twitter 的 Bootstrap 使用 btn-warning 的 css 规则设置。 .但在最终的 html 中，css 类 class="btn btn-warning"插入第一个 span元素，其中包含 button元素。所以我得到了两个按钮 - 一个在另一个里面......

理想情况下，我想移动 class="btn btn-warning"来自 <span> element to the元素，它实际上应该属于的地方。使用 jQuery 实现这一目标的最佳方法是什么？

所以想要的结果应该是:

<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

使用 jQuery 很简单:

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