1

我用 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 的引导程序使用 css 规则为btn-warning. 但是在最终的 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>
4

1 回答 1

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);
    });
});
于 2014-07-30T18:16:29.397 回答