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

Posted 2023-02-16

【中文标题】如何将 CSS 类移动到正确的 html 元素

【英文标题】：How to move CSS classes to the right html elements

【发布时间】：2014-09-22 08:54:13

【问题描述】：

我用 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 的引导程序设置样式，并使用 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>

【参考方案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);
    );
);

【讨论】：

谢谢，这帮助我弄清楚了！