javascript - jQuery parents() - 分别处理每一层

Question

当我有一个匹配多个元素的类时，有没有一种方法可以单独处理每一层父元素

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

我希望能够运行类似 .each() 的东西，但是第一次迭代运行在直接父级上，第二次运行在下一层更深的祖先上，等等......

Answer 1

有趣的问题。我想你会想要一个循环，像这样:

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 - 更新但见下文，这可能会提前终止

您可能希望早于此终止，例如:

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

...取决于您的需要。我在示例中做了。 见下文。

更新 实际上，你必须小心提前终止，当你处理 parent 时最好不要过滤，像这样:

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

原因是您的初始元素集在 DOM 中可能处于截然不同的级别，因此您会比其他元素更快地到达其中一些元素的最顶层元素。上面的 body 检查可能不适合您的需要，但您明白了。