没有jquery的.parents() - 或者父母的querySelectorAll

时间:2012-10-19 19:10:20

标签: javascript parents selectors-api

  

可能重复:
  Check event.target.parentElement with matchesSelector js

我有一个dom对象,我想把它的父母,所有的父母,与querySelectAll()的选择器相匹配,但是对于父母而不是孩子。类似于jQuery的.parents('selector')方法,但我不需要任何后向兼容性。另外,请不要图书馆。我将取一个布尔返回值。

我可以自己写这个作为递归函数/ for / while使用matchesSelector()。我正在寻找鲜为人知的方法或更有效的代码。

保存任何处理都是值得的。想想成千上万的匹配检查,甚至更多。

1 个答案:

答案 0 :(得分:32)

因为我是一个好人!在将来,请务必确保您的问题中包含一些代码,否则它们很可能会被关闭/投票:/

但是你想要使用while()循环,因为我们不知道我们拥有的父母的确切数量

<强> jsFiddle Demo

function getParents(el, parentSelector /* optional */) {

    // If no parentSelector defined will bubble up all the way to *document*
    if (parentSelector === undefined) {
        parentSelector = document;
    }

    var parents = [];
    var p = el.parentNode;

    while (p !== parentSelector) {
        var o = p;
        parents.push(o);
        p = o.parentNode;
    }
    parents.push(parentSelector); // Push that parentSelector you wanted to stop at

    return parents;
}

用法:返回“父母”

的数组
// 2nd param optional, bubbles up to document
getParents( document.getElementById('me') ); 

// get all parents starting from -me- up to ID -outerParent-
getParents( document.getElementById('me'), document.getElementById('outerParent') );