2

我正在寻找一种有效的方法来检查 DOM 节点的任何父节点是否具有给定的 CSS 类。

我的问题与这个问题非常相似： 检查类是否存在于 parent - vanilla JS中，除了我明确地寻找有关如何以最有效的方式实现这一点的建议（此代码将经常被调用）。

上述问题的公认答案提出了一种递归解决方案。我想知道是否有更有效的方法。

4

3 回答 3

2

如果您喜欢漂亮的语法，请使用matchesSelector方法 ( caniuse )。

这个方法经过了一些名称的改变，它仍然是前缀，所以要使用它，规范化名称：

var matchesSelector;
['webkitM', 'mozM', 'msM', 'oM', 'm'].some(function(prefix) {
    var name = prefix + 'atches';
    if (name in document.documentElement) {
        matchesSelector = name;
    }
    name += 'Selector';
    if (name in document.documentElement) {
        matchesSelector = name;
    }
    return matchesSelector; // If found, then truthy, and [].some() ends.
});

确定名称后，可以如下使用：

// Usage
element[matchesSelector]('.someclass *');

或者只是扩展原型：

Element.prototype.matches = Element.prototype[matchesSelector];
// Usage
element.matches('.someclass *');
于 2013-08-20T11:13:56.647 回答
1

这样的事情怎么样？

var hasClass = (function() {
    var hasClassList = !!document.documentElement.classList;

    return function(dom, cls) {
        var spaced = ' ' + cls + ' ';
        while (dom.parentNode) {
            if (hasClassList) {
                if (dom.classList.contains(cls)) {
                    return true;
                }
            } else {
                if ((' ' + dom.className + ' ').indexOf(spaced) !== -1) {
                    return true;
                }
            }
            dom = dom.parentNode;
        }
        return false;
    }
})();
于 2013-08-20T11:34:16.177 回答
0

使用 jQuery：

$(document).ready(function(){
    var parentIsOfClass = ($("[DOM ID or CLASS]").parents().filter("[PARENT CLASS]").length > 0);
});

http://jsfiddle.net/

将返回 true 或 false

于 2013-08-20T11:20:02.603 回答