Question

When I have a class that matches several elements is there a way to process each tier of parents inidividually

$(".myWidespreadClass").parents() // [immediateParent1, immediateParent2, deeperAncestor1, deeperAncestor2]

I would like to be able to run something like .each() but where the first iteration runs over immediate parents, the second over deeper ancestors at the next level etc…

Answer 1

Fascinating question. I think you’ll want a loop, something like this:

var parents = $(".myWidespreadClass").parent(); // Not plural!
while (parents[0]) {
    // Process them, e.g.
    parents.each(function() { /* ... */ });

    // Get the next tier
    parents = parents.parent(); // Not plural!
}

Live example | Live source – Update but see below, that could terminate early

You may want to terminate a bit earlier than that, e.g.:

while (parents[0] && parents[0].nodeName !== "BODY") {

…depending on your needs. I did in the example. See below.

Update Actually, you have to be careful with the early termination, probably better off filtering when you’re processing the parents instead, something like this:

Live example | Live source

var parents = $(".myWidespreadClass").parent();
while (parents[0]) {
    // Process them, e.g.
    parents.each(function() {
        if ($.contains(document.body, this)) {
            // This one is under `body`, process it
            display("Visiting " + this.nodeName + "." + this.className);
        }
    });

    // Get the next tier
    parents = parents.parent(); // Not plural!
}

The reason being that your initial set of elements may be at wildly different levels in the DOM, and so you’ll reach the topmost element for some of them sooner than for others. The body check above may not be appropriate for your needs, but you get the idea.