Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

.parents() without jquery - or querySelectorAll for parents [duplicate]

Possible Duplicate:
Check event.target.parentElement with matchesSelector js

I have a dom object, I'd like to match its parents, all parents, against a selector, like querySelectAll(), but for parents instead of children. Similar to jQuery's .parents('selector') method, but I do NOT need any back-wards compatibility. Also, no libraries please. I will totes take a boolean return value.

I CAN write this myself as a recursive function/for/while using matchesSelector(). I'm looking for little-known methods or more efficient code.

Saving any processing is worth it. Think tens of thousands of match checks, or more even.

like image 719
Randy Hall Avatar asked Oct 19 '12 19:10

Randy Hall


People also ask

What is the difference between parent () and parents () methods in jquery?

parent() method returns the direct parent element of the selected one. This method only traverse a single level up the DOM tree. parents() method allows us to search through the ancestors of these elements in the DOM tree.

How do you get the parent element in querySelector?

By using querySelector() and closest() methods is possible to get the parent element. querySelector() returns the first element that matches a specified CSS selector(s) in the document. closest() searches up the DOM tree for the closest element which matches a specified CSS selector.

What is document querySelector()?

querySelector() The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

When to use querySelector in JavaScript?

The querySelector() method in HTML is used to return the first element that matches a specified CSS selector(s) in the document. Note: The querySelector() method only returns the first element that matches the specified selectors. To return all the matches, use the querySelectorAll() method.


1 Answers

You would want to use a while() loop since we don't know the exact number of parents we have

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;
}

Useage: Returns an Array of "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') );
like image 90
Mark Pieszak - Trilon.io Avatar answered Sep 18 '22 13:09

Mark Pieszak - Trilon.io