Реализация jQuery.parents() на Vanilla JS

Опубликовано 13.04.2015 в 23:28

В современном JavaScript появилось столько возможностей, что в библиотеках, подобных jQuery, нет никакой надобности. К сожалению, не все функции доступны в Vanilla JS, например метода, аналогичного методу parents() в JavaScript нет, поэтому я написал аналог.

Код

Element.prototype.parents = function(selector) {
    var elements = [];
    var elem = this;
    var ishaveselector = selector !== undefined;
 
    while ((elem = elem.parentElement) !== null) {
        if (elem.nodeType !== Node.ELEMENT_NODE) {
            continue;
        }
 
        if (!ishaveselector || elem.matches(selector)) {
            elements.push(elem);
        }
    }
 
    return elements;
};

Использование

Применить действие для множества элементов можно так:

[].forEach.call(document.querySelector('#main').parents('.cat'), function(element) {
    element.style.backgroundColor = '#008800';
});

Проверить на существование родителя с классом .animals (jsfiddle):

[].forEach.call(document.querySelectorAll('.animal'), function(element) {
    element.addEventListener('mousedown', function() {
        var isBobAnimal = this.parents('.animals').length !== 0;
        if (isBobAnimal) {
            alert('Bob is animal');
        } else {
            alert('Bob is spy!');
        }
    });
});

Я адаптировал последний пример использования jQuery.parents() отсюда, посмотреть в работе можно здесь: https://jsfiddle.net/ziggi/1aec377b/
Ещё один пример: https://jsfiddle.net/ziggi/5qm4xnku/

Полезные ссылки

JavaScript, Web javascript, jquery