jQuery 获取 CSS 中指定的元素类答案

【问题标题】：jQuery Getting Element Class as Specified in CSSjQuery 获取 CSS 中指定的元素类
【发布时间】：2010-07-07 16:43:50
【问题描述】：

我知道 Attr 获取元素的确切类。有没有办法获得 CSS 中定义的元素精确类？例如，一个元素可能具有类“title”，但在 CSS 中定义为后代选择器，例如： .other-list .title {} 我需要一些东西来获得确切的班级价值。你可以在这里看到完整的例子： http://jsfiddle.net/2TMgQ/2/

点击时，两个元素都有“标题”类，但在 CSS 中定义为 2 个不同的元素。谢谢

【问题讨论】：

你可以这样做，但你需要吗？有可能，Firebug Lite 可以做到这一点，但它并不漂亮：fbug.googlecode.com/svn/lite/branches/firebug1.4/content/…
是的，我需要。事实上，Firebug 做到了。我不认为我能够理解 FireBug 代码。那是我第一次看到的地方，我认为有一个更简单的方法......这个怎么样：developer.mozilla.org/en/DOM/cssRule.selectorText
他们确实在使用“selectorText”，只是再次查看了他们的代码。不知道怎么弄，代码太大了，看不懂
@Mircea - 让我这样说吧……Firebug 人很好，他们不会以更复杂的方式来做这件事（对他们来说)。您可以从他们的实现中剥离出来，因为您不需要 all 那些功能，但是仅仅找到规则并不容易。例如，如果 10 条规则应用于您的元素，那会怎样？你用哪个？它总是可以是一个列表，如果你的例子是这个呢？ jsfiddle.net/2TMgQ/9
@Marko - 为什么盘子在眼镜里？真的是大玻璃杯还是小盘子？

标签： jquery class

【解决方案1】：

这应该会为您提供适用于该元素的所有 CSS 样式。它使用 jQuery 的 is 函数来检查 CSS 规则选择器是否适用于给定元素。遍历document.styleSheets 中的所有样式表，并遍历每个样式表中的所有cssRules，并检查selectorText 是否与元素匹配。在伪代码中：

given::element

matchedRules = []

for styleSheet in document.styleSheets
    for rule in styleSheet.cssRules
        if element.is(rule.selectorText)
            matchedRules.push(rule.selectorText)

return matchedRules;

在代码中：

function getCSSRules(element) {
    element = $(element);

    var styleSheets = document.styleSheets;
    var matchedRules = [], rules, rule;

    for(var i = 0; i < styleSheets.length; i++) {
        rules = styleSheets[i].cssRules;

        for(var j = 0; j < rules.length; j++) {
            rule = rules[j];
            if(element.is(rule.selectorText)) {
               matchedRules.push(rule.selectorText);
            }
        }
    }

    return matchedRules;
}

这应该返回适用于元素的所有规则。对于您的first example，它返回：

[".links-list .title"]

对于尼克的extended example，它返回：

[".links-list .title", ".title", "a", "li a"]

您如何定义特异性以及如何决定从该列表中过滤掉哪些内容取决于您。

【讨论】：

这正是我需要的结果。让我试试看。
谢谢，这得到了与 Firebug 完全相同的选择器。

【解决方案2】：

如果您指的是父子选择器，那么语法将类似于：

$(".other-list > .title")

看看http://api.jquery.com/category/selectors/

【讨论】：

他要GET父类

【解决方案3】：

也许这会有所帮助

CSS parser/abstracter? How to convert stylesheet into object

【讨论】：