如何将CSS类移动到正确的html元素 [英] How to move CSS classes to the right html elements

问题描述

我用XSLT和XSLTForms尝试了一些东西，并陷入了一个奇怪的问题。我想为某些 xforms：trigger 添加样式，但我使用的XForms实现（ XSLTForms ）将以下简单xforms代码转换为这些html元素：

 < span id =multiplicationclass =btn btn-warning xforms-control xforms-trigger xforms-appearance-最小> 
< span class =value> 
< button type =button> 
 < / button> 
< / span> 
< / span> 
  

这里是实际的XForms代码。

 < xf：trigger class =btn btn-warningid =division> 
< xf：label> /< / xf：label> 
< / xf：trigger> 
  

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

  | _span 
 | _span 
 | _button 
 | _span（用于标签）
  btn-warning  C>。但在最终的html中，css类 class =btn btn-warning插入到第一个 span 元素中，其中包含按钮元素。所以我得到了两个按钮 - 在另一个里面...... 
 
 
理想情况下，我想将 class =btn btn-warning 来自< span>元素到元素，它实际上应该属于它。让我们说jQuery实现这个最好的方法是什么？  
 
 
所以所需的结果应该是：
 
 pre $ < span id =multiplicationclass =xforms-control xforms-trigger xforms-appearance-minimal> 
< span class =value> 
< button type =buttonclass =btn btn-warning> 
 < / button> 
< / span> 
< / span> 
  




解决方案

使用jQuery很简单：

$ b $

  $（function（）{
 $（span.btn）。each（function（）{
 var cssClasses = this.className.split（），i; 
 
 for（i = 0; i< cssClasses.length; i ++）{
 //删除任何不以数组
 if（cssClasses [i] .indexOf（btn）=== -1）{
 cssClasses.splice（i，1）; 
} 
 
 cssClasses = cssClasses.join（）; 
 
 //将剩余的类从此转移到内部<按钮> 
 $（this）
 .removeClass（cssClasses）
 .find（button）.addClass（cssClasses）; 
}）; 
}）; 
  

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>

解决方案

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

这篇关于如何将CSS类移动到正确的html元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！