Question

我有一个包含这样的元素的文档：

<ul class="fx-startpoint">
    <li>some text</li>
    <li>other text</li>
</ul>

首先，我需要使用jQuery查看具有以fx-开头的类的所有元素。我认为这可以使用$("class=^fx-")，但是我需要查看在fx-开头的CSS文件中是否有其他类可用，但它们当前未设置为元素或子元素（就像李的）。

我怎么能用jQuery / jQueryUI做这个？

Answer 1

选择器class=^fx-只能找到这样的元素：

<div class="fx-foo bar">...</div>

......而不是像这样：

<div class="bar fx-foo">...</div>

...因为fx-没有出现在属性的开头。如果您可能有第二个表单，遗憾的是您唯一的选择是查看所有元素并过滤掉那些没有fx-xxx类的元素。目前没有“包含以”开头的单词的选择器。

至于查找定义以fx-开头的类选择器的所有规则，您可以这样做。 document.styleSheets为您提供了应用于当前文档的所有样式表的列表。每个样式表对象都有一个为其定义的规则列表（根据浏览器的年龄和品牌，这将是cssRules或rules。每个规则（CSSStyleRule object）都会包含有关规则的信息，包括selectorText为您提供规则的完整选择器。因此，您可以解析该选择器以查看它是否定义了以fx-开头的类规则。确保在查看选择器时允许使用逗号（例如，.foo, .fx-bar { ... }），并注意解析选择器字符串（尽管不是 hard ）并非易事。

Answer 2

OP发布的jsFiddle的一个分支：http://jsfiddle.net/mori57/kgqXY/

function GetAppliedCssRules($element) {
    var appliedRules = [];
    for (var x = 0; x < document.styleSheets.length; x++) {
        var rules = document.styleSheets[x].cssRules;
        for (var i = 0; i < rules.length; i++) {
            var txt = rules[i].selectorText;
            if (txt.indexOf('.fx-') > -1) {
                appliedRules.push(txt);
            }
        }
    }
    return appliedRules;
}

具体来说，您只是将搜索更改为查找.fx-，这可以通过简单的.indexOf来完成。正则表达式也是可能的（正如其他几个海报所提到的那样）。

Answer 3

var classList =$('#divId').attr('class').split(/\s+/);

classList返回一个类数组：然后你可以迭代并找到你想要的那个。

var classList =$('#divId').attr('class').split(/\s+/);
$.each( classList, function(index, item){
if (item === 'someClass') {
   //do something
}
});

如何获取对象的CSS类？

3 个答案: