为什么我不能使用 JQuery style() 函数设置这个 CSS 设置？ [复制]

Question

我对这个 JQuery 脚本有一些问题（在一个使用 Jquery-1.9.1.min.js 的项目上）：

$(document).ready(function () {
    $("thead.opening").click(function () {

        var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
        alert("INTO second function, chrome: " + is_chrome);

        $(this).next().css('width', '10000000em');
        $(this).next().css('display', 'table-row-group');

        //$(this).next().css('display', is_chrome ? 'table-row-group' : 'table-row-group');

        //alert($(this).next().css('display'));
    });
});

这个脚本只是简单的给被点击的thead元素相关的tbody元素设置一个CSS样式，这样做是这样的：

$(this).next().css('display', 'table-row-group');

它可以工作，但我还必须为这个 CSS 属性设置 !important 但是如果我这样做它就不能工作：

$(this).next().css('display', 'table-row-group !important');

所以在网上搜索我在 StackOverflow 上找到了这个帖子：How to apply !important using .css()?

所以，在前面的脚本中，我尝试使用：

$(this).next().style('width', '10000000em', 'important');
$(this).next().style('display', 'table-row-group', 'important');

改为：

$(this).next().css('width', '10000000em');
$(this).next().css('display', 'table-row-group');

但问题是我得到了这个错误的结果：

<tbody class="expanded" style="display: block; width: 1e+7em;">

因此，似乎 width 属性设置正确，但 display 属性未正确设置（实际上它设置在 block 而不是 表行组）

为什么？我错过了什么？我该如何解决这个问题？

Tnx

Answer 1

我建议创建一个如下所示的类：

CSS

.forceDisplay { display: table-row-group !important; }

然后使用 jQuery 的 addClass() 方法应用 !important 声明。

$('#element').addClass('forceDisplay');