动态隐藏/覆盖CSS类 [英] Hide/override CSS classes dynamically

问题描述

我有以下HTML。

 < th id =form：dataTable：discountStartDate> 
< span class =ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s>< / span> 
< span class =ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s>< / span> 
< / th> 
  

我需要隐藏给定的CSS类 - ui-sortable-column- < span> 中的图标。

< hr>

如果我做了以下操作，

 < style type =text / CSS> 
＃form \：dataTable\：discountStartDate .ui-sortable-column-icon {
 display：none; 
} 
< / style> 
  

然后，它会从两个span标签中隐藏该类。

第一个span标签由我编写。因此，它可以被操纵。如果有必要，可以给它一个 id 属性，但另一个span标记是由一个我无法忍受的框架生成的。

是否有一种方法可以隐藏CSS类，只能从最后一个span标记中指定 ？

_{更好的是，如果所有来自最后一个span标签的类都被覆盖了。 如果你想动态从上一个span元素中移除类，这里是一些jQuery：}

  $（'＃form \ \：dataTable \\：discountStartDate> span：last'）。removeClass（'ui-sortable-column-icon'）; 
  

jsFiddle示例

如果您想从所有span元素中删除类：

  $（'＃form \\：dataTable \\：discountStartDate> span'）。removeClass（'ui-sortable-列图标'）; 
  

jsFiddle示例

---

根据您的更新，看起来好像你想要这样的东西虽然。

 ＃form \：dataTable\：discountStartDate span.ui-sortable- column-icon：not（：last-child）{
 / * style * / 
} 
  

使用：not 选择器，您可以排除最后一个 span 元素。

jsFiddle示例

I have the following HTML.

<th id="form:dataTable:discountStartDate">
    <span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span>
    <span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span>
</th>

I need to hide the given CSS class - ui-sortable-column-icon from the last <span> only.

---

If I do the following,

<style type="text/css">
    #form\:dataTable\:discountStartDate .ui-sortable-column-icon{
        display : none;
    }
</style>

then, it will hide that class from both the span tags.

The first span tag is written by me. Therefore, it can be manipulated. It can be given an id attribute, if necessary but the other span tag is generated by a framework that I cannot tough.

Is there a way to hide the CSS class as specified from the last span tag only?

_{It would be even better, if all the classes from that last span tag are overridden.}

解决方案

If you want to dynamically remove the class from the last span element, here is some jQuery:

$('#form\\:dataTable\\:discountStartDate > span:last').removeClass('ui-sortable-column-icon');

jsFiddle example

If you want to remove the class from all the span elements:

$('#form\\:dataTable\\:discountStartDate > span').removeClass('ui-sortable-column-icon');

jsFiddle example

---

Based on your update, it seems as though you want something like this though.

#form\:dataTable\:discountStartDate span.ui-sortable-column-icon:not(:last-child) {
    /* style */
}

Using the :not selector, you can exclude styling from the last span element.

jsFiddle example

这篇关于动态隐藏/覆盖CSS类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！